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