2

Добрый день!

Подскажите, как можно сделать пунктир к дочернему элементу?

Как тут /

alt text

2 ответа 2

9

Вот вариант на чистом CSS (jsfiddle). Картинки там не нужны.

span { /* обертка пункта */
     text-decoration: none;
     display: block; /* растянем до правого края блока */
     margin: 0 0 0 1.2em;     
     background-color: transparent;
     border: dotted silver; /* цвет линий */
     border-width: 0 0 1px 1px; /* границы: низ и лево */
   }
   span a {/* текст элемента дерева */
      display: block;
      position: relative;
      top: .95em; /* смещаем узел на середину линии */
      background-color: #fff; /* закраска в цвет фона обязательна иначе будет видно линию */
      margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее  */
      padding: 0 0.3em; /* небольшой отступ от линии */
   }

Идея в том, что мы делаем границы, а сам текст смещаем вверх, таким образом получаем эффект линии ведущей к узлу.

5
  • добавьте на первый уровень в конец еще пару узлов. если захочется добавить плюсики для раскрытия тоже будет сложно. 28 авг 2012 в 10:18
  • 1
    дело вкуса, я спорить не буду. если бы позволяли сроки, то мне больше удовольствия принесло реализовать все на css. но это мое субьективное мнение... 28 авг 2012 в 10:51
  • это копипаста с хабры вашего поста? иначе как-то странно слышать про вкусы и сроки... 28 авг 2012 в 15:50
  • нет, реализация не моя, а найдена где-то на просторах интернета, возможно и с хабра... но понравилась мне больше всего. 28 авг 2012 в 19:47
  • 2
    в таком случае не помешают ссылки на полное решение: * Статичное дерево html+css * Интерактивное дерево html+css+jquery * С запоминанием состояния html+css+jquery+cookies Пример 28 авг 2012 в 21:36
4

Картинкой. Смотрите здесь. Для соответствующих <li> устанавливается свой класс, и в css для класса указывается background. firebug в руки и смотреть что и как...

1
  • Вот, например, и у Microsoft на MSDN сделано [как][1] Одна общая картинка для всех пиктограмм менюшек, а затем уже к каждому пункту приставляется свой блок, который вырезает нужный кусок пиктограммки 13х9 из общего для всех изображения .cl_nav_dots{top:-3px;left:-1511px;} [1]: msdn.microsoft.com/ru-ru/library/dd831853
    – Mikola
    29 авг 2012 в 18:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.