Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяJavaScript Древовидное меню

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

Достаточно большой популярностью пользуются древовидные меню а-ля "проводник Windows". Причем эта популярность заслуженна - у таких систем навигации есть ряд преимуществ перед классическими выпадающими или горизонтальными. В этой статье описан простейший вариант такого меню ( альтернативное название древовидного меню - tree menu).

Для начала определимся, что нам надо:
- изначально все подменю должны быть скрыты;
- при нажатии на один из пунктов должны раскрываться дочерние подменю;
- при повторном нажатии на пункт подменю должны скрываться;
- возможность легкого добавления пунктов меню и подменю;
- возможность легкого изменения внешнего вида;
А теперь, используя свойство style.display попробуем перевести наши требования с русского языка на язык javascript.
Сделаем небольшую функцию hide, которая будет "прятать" неактивированные пункты.
Грубый "перевод" будет звучать примерно так - элемент с идентефикатором label1...label3 не показывать:
function hide()
{
document.getElementById('label1').style.display = "none";
document.getElementById('label2').style.display = "none";
document.getElementById('label3').style.display = "none";
}
Следующая функция - назовем ее menu - будет проверять условие.
Если элемент в документе имеет выбранный идентификатор и равен значению none, то присвоить ему значение block, которое и откроет подменю.
function menu(menuId)
{
if(document.getElementById(menuId).style.display == "none")
{
hide();
document.getElementById(menuId).style.display = "block";
}
else
{
hide();
}
}
Осталость только вызвать функцию hide в начале веб-страницы:
<body onLoad="javascript:hide()">
и прописать идентификаторы label для слоев в теле html-документа:
<div id="label1"></div>...<div id="label1"></div>
Теперь в качестве ссылки достаточно обратиться к функции menu:
<a href="javaScript:menu('label1')">Меню_1</a>

Посмотреть на древовидное меню в действии можно здесь, а скачать готовый скрипт можно отсюда.
Категория: JavaScript
Опубликовано: 12 мая 2008, просмотров: 3966
 (Голосов: 2)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.32 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.