Как сделать древовидный список с помощью CSS

Сегодня мы рассмотрим урок по созданию древовидного списка, каждый из пунктов которого соединяется линиями.

Если не засорять код чем-то лишним, то в идеале он будет выглядеть следующим образом:

[php]
<ul class="tree">
<li>Продукты
<ul>
<li>Молочные
<ul>
<li>Молоко</li>
<li>Кефир</li>
</ul>
</li>
.
.
.
</ul>
[/php]

По сути, это простой многоуровневый список. Единственная вещь, превращающая его его в “дерево” - класс tree, который мы присвоили <ul>. Без него список выглядит самым обычным образом:

Избавляемся от “пуль”

Первое, что мы теперь должны сделать, это избавиться от так называемых “пуль” - точки, квадратики, кружочки и пр., расположенных напротив позиций списка. Для этого присваиваем list-style-type значение none.

[css]
ul.tree, ul.tree ul {list-style-type: none;}
[/css]

Рисуем вертильные линии

Теперь необходимо нарисовать вертикальную прямую напротив каждого из пункта вне зависимости от уровня вложения. Для этого используем следующую картинку (ширина - 1px, высота - 10px):

vline.png

Прописываем ее фоном для списка <ul> и добавляем значение repeat-y, теперь картинка будет повторяться по оси y, тем самым создавая вертикальную прямую по высоте всего спика. Добавляем значение для margin и padding к <li>, тем самым красиво форматируя будущую структуру списка.

[css]
ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}

ul.tree ul {
margin-left: 10px;
}<strong>

</strong>ul.tree li {
margin: 0;
padding: 0 12px;
}
[/css]

Объединяем

Используем фоном картинку с Т-образной линией для каждого из пунктов.

node.png

Устанавливаем значение line-height, равное высоте картинки. Для текса определяем цвет #369 и выделяем жирным bold.

[css]
ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}

ul.tree ul {
margin-left: 10px;
}

ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}
[/css]

И последнее:)

Как видим, для последнего пункта требуется специальный стиль. Во-первых, в качестве фона будем использовать другую картинку:

lastnode.png

Во-вторых, вертикальная линия в списке должна заканчиваться на последней записи. Исправляем это следующим образом - устанавливаем для последней записи цвет фона (белый или тот, который используете). Таким образом, фоновый рисунок пункта списка перекроет фон всего списка, заменив последний сегмент вертикальной линии.

[css]
ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}

ul.tree ul {
margin-left: 10px;
}

ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}

ul.tree li.last {
background: #fff url(lastnode.png) no-repeat;
}
[/css]

Браузер не знает, какая из записей последняя, поэтому прописываем класс last там, где это необходимо:

[css]
<ul class="tree">
<li>Animals
<ul>
<li>Birds</li>
<li>Mammals
<ul>
<li>Elephant</li>
<li<strong> </strong>class="last">Mouse</li>
</ul>
</li>
<li<strong> </strong>class="last">Reptiles</li>
.
.
.
</ul>
[/css]

…если лень - используйте JavaScript, который сделает все сам:

[php]
<script type="text/javascript">
window.onload = function () {
var tree = document.getElementById("tree");
var lists = [ tree ];

for (var i = 0; i < tree.getElementsByTagName("ul").length; i++)
lists[lists.length] = tree.getElementsByTagName("ul")[i];

for (var i = 0; i < lists.length; i++) {
var item = lists[i].lastChild;

while (!item.tagName || item.tagName.toLowerCase() != "li")
item = item.previousSibling;

item.className += " last";
}
};
</script>
.
.
.
<ul class="tree"<strong> </strong>id="tree">
<li>Animals
<ul>
<li>Birds</li>
<li>Mammals
<ul>
<li>Elephant</li>
<li>Mouse</li>
</ul>
</li>
.
.
.
</ul>
[/php]

Конечно, каждый раз добавлять класс last - это не лучший выход. Фактически, есть изящное решение данной проблемы - псевдо-класс :last-child. Чтобы использовать его, присваиваем данный селектор к классу last:

[php]
ul.tree li<strong>:</strong>last-child {
background: #fff url(lastnode.png) no-repeat;
}
[/php]
К сожалению, данный псевдо-класс используется только в CSS3 и лишь некоторые браузеры его поддерживают.

Скачать урок

*Вольный перевод статьи “Turning Lists into Trees”

Спасибо за добавление статьи в: