В последнее время стало популярным использование на сайте раскрывающегося древовидного меню. На самом деле такое меню очень легко построить, если знать принципы работы свойства display.

Давайте рассмотрим пример простейшего двухуровневого древовидного меню:

< style>

p { margin: 0px }
body { font-size: 11px; font-family: verdana; line-height: 17px }
.sub { padding-left: 20px; display: block }
.menu { cursor: pointer; display: block }
a { text-decoration: none; color: #000000 }

< /style>

< script language=JavaScript>

function show(obj) {

if (document.getElementById(obj).style.display == 'none')
document.getElementById(obj).style.display = 'block';
else document.getElementById(obj).style.display = 'none';

}

< /script>

< span class="menu" onclick="show('sub1')">+ Статьи< /span>

< span class="sub" id="sub1" style="display: none">
< p>< a href='http://www.webobzor.net'>Интернет< /a>< /p>
< p>< a href='http://www.webobzor.net'>JavaScript< /a>< /p>
< /span>

< span class="menu" onclick="show('sub2')">+ Рейтинг< /span>

< span class="sub" id="sub2" style="display: none">
< p>< a href='http://www.webobzor.net'>Главная< /a>< /p>
< p>< a href='http://www.webobzor.net'>Регистрация< /a>< /p>
< p>< a href='http://www.webobzor.net'>Статистика< /a>< /p>
< /span>

< span class="menu" onclick="show('sub3')">+ Форум< /span>

< span class="sub" id="sub3" style="display: none; border: 3px">
< p>< a href='http://www.webobzor.net'>Регистрация< /a>< /p>
< p>< a href='http://www.webobzor.net'>Cообщения< /a>< /p>
< p>< a href='http://www.webobzor.net'>Поиск< /a>< /p>
< /span>

Опустим описание стилей CSS. Здесь для вас все должно быть понятно: класс menu - пункт меню, sub - подпункт.

Рассмотрим подробнее код HTML. Каждый пункт меню представляет собой объект span. При нажатии на объект происходит обращение в функции show(obj), которая скрывает или отображает определенный объект. В нашем случае таким объектом является другой контейнер span, который содержит подпункты меню.

Теперь обратим свое внимание на свойство display. Оно может принимать несколько значений, но нас в первую очередь интересует display: block, который позволяет отображать содержимое контейнера в виде блок, который можно в любой момент скрыть (display: none). Однако в отличие от свойства visibility: hidden, при использовании display происходит скрытие объекта в прямом смысле, объект исчезает с экрана, а весь текст, который был под ним, смещается вверх.

При описание контейнера с подпунктами ему присваивается класс sub, который указывает, что данный контейнер является блоком:

.sub { padding-left: 20px; display: block }

Однако по умолчанию все подпункты должны быть скрыты:

< span class="sub" id="sub1" style="display: none">

Теперь при нажатии на соответствующий пункт меню, будет выполняться функция show, в качестве параметра будет передаваться указатель на объект span с соответствующим id.

Функция show определяет, скрытый ли блок, если да, отображает его, в протовном случае скрывает.