Древовидное меню на JavaScript

В последнее время стало популярным использование на сайте раскрывающегося древовидного меню. На самом деле такое меню очень легко построить, если знать принципы работы свойства 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 определяет, скрытый ли блок, если да, отображает его, в протовном случае скрывает.

При создании такого меню вполне возможно поэксперементировать с CSS и создать красивое меню с любым количеством уровней. Например такое меню:

+ Статьи

Интернет

---

JavaScript

+ Рейтинг

Главная

---

Регистрация

---

Статистика

+ Форум

Регистрация

+ Действия

Cообщения

---

Кто в онлайне

Поиск

Обратите внимание на то, что в IE и в Mozilla меню смотрится по разному. Скачать данный скрипт (трехуровневое меню) вы можете по этой ссылке.

webobzor.net

name  12.06.2007  13:48 как сделать, чтобы при перезагрузке странички, меню сохраняло свое состояние?

lexa  12.06.2007  16:47 Самый простой, сохранять в куке информация в виде - id объекта - 0/1 (открыт/закрыт)

lexa  12.06.2007  16:51 Разумеется при перезагрузке должен специальный скрипт обрабатывать куки и перенаправлять на эту же страницу, ну и формирование на странице меню должно быть динамическим разумеется, а не статическим

darkness  20.06.2007  14:25 Отличная статья, только в меню-примере есть лишний код, и он не работает в опере. Чтоб заработал нужно убрать теги перед каждым пунктом меню.

lexa  20.06.2007  16:24 да, только заметил, в Опере не проверял

darkness  20.06.2007  17:47 В принципе ничего страшного там нет, нужно только теги убрать и все будет ок в опере)

darkness  20.06.2007  17:49 теги в смысле ))

ujean  25.06.2007  15:19 Теги всмысле )

ujean  25.06.2007  15:19 Теги всмысле )

ujean  25.06.2007  15:20 теги Параграф

lexa  25.06.2007  18:07 спасибо, а то я с первого раза не понял :))

renkid  20.09.2007  15:51 Че-то не пойму нассчет тегов для оперы.....попробывал сам вроде в опере как хреново работает....Можно поподробней?

droni4  16.11.2007  11:03 Уважаемые подскажите как сделать, чтобы при перезагрузке странички, меню сохраняло свое состояние? ***????*** без этой функции это меню просто не даработаное и ненужное

Grundiss   07.02.2008  13:47 А как добавить на страничку кнопку "Открыть все"? Проблема в том, что заранее не известно сколько пунктов будет содержать меню -- оно генерируется исходя из инструкций XSL.

lexa  08.02.2008  12:03 кидай код на форум, посмотрим

retuh    22.02.2008  21:31 Lexa ты бы подробней объснил как надосделать чтобы меню оставалось в том же положении что и перед перезагрузкой, по моему пару фраз что ты кинул про куки не достаточно, так как тут явно не програмеры читают. ЗАРАНЕЕ БЛАГОДАРЕН

vint    07.03.2008  13:18 Статья хорошая, но ИМХО устаревшая. Слишком примитивно все :(

Wincert    01.04.2008  00:46 Этим помойму сейчас мало кого удивишь.

A$K  17.10.2008  00:47 А мне очень пригодилось! Достали все эти навороченные меню, а это как раз самое ТО! и помещается все в один файл без лишних тонкостей! А сам я не силен в этом, поэтому код беру и ставлю себе на сайт. Большое спасибо!

Serg  31.10.2008  11:39 Отличная протсая менюшка!!! Только вот единственное... Как сделать так чтобы при нажатии на один из подразделов меню, страница не дерглась и отсвалась на своем месте а только лишь меню окрывалось?

lexa  31.10.2008  12:42 Serg, пример страницы можно посмотреть?

Serg  05.11.2008  10:42 Можно - http://europe-realty.ru/bolgariya/ вот сижу разбираюсь. Если кликнуть по самой ссылке КАТАЛОГ НЕДВИЖИМОСТИ, то в том случае если страница не в первоночальном положении, то она возвращается и меню открывается. А если кликнуть не по ссылке а по самому блоку то меню выдвигается без изменения положения страницы. вот думаю как это избежать. то есть сделать так чтобы ссылка как бы была :)

Serg  05.11.2008  13:38 lexa, спасибо большое, я посмотрел как у тебя и уже допер как сделать, убрал href и покорректировал css.

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	198