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 you have read our privacy policy.

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