До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.
Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792
В реализации используется исключительно HTML и CSS, никаких картинок.
Для отрисовки маркера раскрытия списка использовал CSS прием с границами нулевого размера блока.
Написано продолжение со скриптами.
Посмотрите код полностью и рабочий пример.
Продолжение темы в статье. Узлы теперь разворачиваются, как многие ожидали.
Проверено в FF3, IE6-8, Opera 9, Google Chrome, Safari 4 Beta.
Обновления:
UPD 28.03.2009: внесены изменения для поддержки IE 6 (спасибо alemiks);
UPD 30.03.2009: работает в IE6, Mac OS X 10.5.6 Safari 4 Beta и Firefox 3.0.0.7, IE8 под Win7 (проверил anton_ivanov), исправлены опечатки в тексте (спасибо ferrari).
UPD 31.03.2009: Добавлено в css для ссылок outline: none, заданны :active, :focus. Демонстрационный пример обновлен.
UPD 04.04.2009: Код доработан с применением jQuery. Теперь узлы раскрываются. Подробно в статье.
UPD 19.05.2011: Сделан вариант с запоминанием состояния дерева в Cookies .
UPD 24.02.2012: Сделан второй вариант оформления по запросу sanch3z .
Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792
Многоуровневое дерево
В реализации используется исключительно HTML и CSS, никаких картинок.
Для отрисовки маркера раскрытия списка использовал CSS прием с границами нулевого размера блока.
Написано продолжение со скриптами.
HTML
<div id="multi-derevo">
<h4><a href="#">Ствол дерева</a></h4>
<ul>
<li><span><a href="#1"><em class="marker open"></em>1. Ветка</a></span>
<ul>
<li><span><a href="#11" class="current" title="Выбранный раздел"><em class="marker open"></em>1.1. Ветка</a></span>
<ul>
<li><span><a href="#111">1.1.1. Листик</a></span></li>
<li><span><a href="#112">1.1.2. Листик</a></span></li>
</ul>
</li>
<li><span><a href="#12">1.2. Ветка</a></span></li>
</ul>
</li>
<li><span><a href="#2"><em class="marker"></em>2. Ветка</a></span></li>
<li><span><a href="#3"><em class="marker"></em>3. Ветка</a></span></li>
<li><span><a href="#4"><em class="marker"></em>4. Ветка</a></span></li>
<li class="last"><span><a href="#5" title="Послледняя ветка"><em class="marker open"></em>5. Ветка, верхушка</a></span>
<ul>
<li><span><a href="#1">5.1. Ветка</a></span></li>
<li><span><a href="#1">5.2. Ветка</a></span></li>
</ul>
</li>
</ul>
</div><!-- /multi-derevo -->
CSS
/* общий стиль */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
}
/* Дерево многоуровневое
-------------------------------- */
#multi-derevo {
width: 220px; /* блок под дерево */
border: solid; /* границы блока */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* нижний отступ */
font-size: 1.3em;
}
span { /* обертка пункта */
text-decoration: none;
display: block; /* растянем до правого края блока */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid 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; /* небольшой отступ от линии */
}
h4 {/* заголовок дерева */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* цвет вертикальной линии между узлами */
}
ul li.last ul li {/* последний узел, соединительную линию к след. узлу убираем */
border: none;
}
.marker { /* маркер раскрытия списка в закрытом состоянии */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float: left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open {/* маркер раскрытия списка в открытом состоянии */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .open { border-style: solid dotted dotted dotted; }
* This source code was highlighted with Source Code Highlighter.
Посмотрите код полностью и рабочий пример.
Продолжение темы в статье. Узлы теперь разворачиваются, как многие ожидали.
Проверено в FF3, IE6-8, Opera 9, Google Chrome, Safari 4 Beta.
Обновления:
UPD 28.03.2009: внесены изменения для поддержки IE 6 (спасибо alemiks);
UPD 30.03.2009: работает в IE6, Mac OS X 10.5.6 Safari 4 Beta и Firefox 3.0.0.7, IE8 под Win7 (проверил anton_ivanov), исправлены опечатки в тексте (спасибо ferrari).
UPD 31.03.2009: Добавлено в css для ссылок outline: none, заданны :active, :focus. Демонстрационный пример обновлен.
UPD 04.04.2009: Код доработан с применением jQuery. Теперь узлы раскрываются. Подробно в статье.
UPD 19.05.2011: Сделан вариант с запоминанием состояния дерева в Cookies .
UPD 24.02.2012: Сделан второй вариант оформления по запросу sanch3z .