Не так давно в одном из проектов мне потребовалось визуально оформить меню в виде дерева. Самым простым решением было использовать разные изображения и с их помощью организовать весь комплекс, но этот путь меня не прельщал. Поэтому, я воспользовался помощью Мирового Разума и решение было найдено достаточно быстро.
И поскольку решение Chris Coyier мне показалось самым красивым и наиболее элегантным из найденных, я предлагаю вам с ним ознакомиться.
Изображение в один пиксель может быть достаточно универсальной вещью. Воспользуйтесь repeat-x, и он станет горизонтальной линией, repeat-y позволит трансформировать его в вертикальную линию, и кроме того, использование repeat позволит залить эту линию одним цветом. Поэтому, применив немного «CSS-магии» мы можем использовать этот пиксель для оформления маркированного списка. Перейдем к самому решению.
В HTML коде нет ничего оригинального, это обычный вложенный список.
В CSS мы применим повторение однопиксельного PNG изображения, вертикально — к самому списку и горизонтально — к элементам списка. Также, для элементов списка мы «остановим» линию так, чтобы она проходила не по всей длине — путем придания якорям ссылок белого фона, который ложится поверх, заслоняя собой линию.
/*START: В исходном коде Chris Coyier этого нет, но должно быть обязательно добавлено */
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
* {
margin:0;
padding:0;
}
/*END: В исходном коде Chris Coyier этого нет, но должно быть обязательно добавлено */
#project-list {
background:transparent url(graypixel.png) repeat-y 15px 0;
width:340px;
}
#project-list li {
font-size:16px;
margin:15px 0 20px;
padding:0 0 0 10px;
}
#project-list li a {
background:white;
color:#1F6DD9;
display:block;
padding:3px;
}
#project-list li a:hover {
color:#84B8FF;
}
#project-list li ul li {
background:transparent url(graypixel.png) repeat-x 0 8px;
font-size:13px;
margin:4px 0 4px 5px;
padding:0 0 0 20px;
}
#project-list li ul li a {
padding:0 0 0 3px;
}
#project-list li ul li ul {
background:transparent url(graypixel.png) repeat-y 15px 0;
margin-bottom:10px;
}
#project-list li ul li ul li {
margin-left:16px;
padding-left:10px;
}
