Версия для печати темы

Автор: iluha@iluha.ru 11.8.2007, 10:22

Вообще вся задача создания выпадающих меню сводится к трем пунктам:
1. создание самих меню и задание им начального параметра visibility: hidden;
2. описание события для основного меню, то есть при каком действии должно выпадать меню.
3. создание скрипта который будет изменять по какому-то событию параметр visibility: hidden; на visibility: visible; и обратно.


1. К каждому из выпадающих пунктов меню создаётся DIV в котором указывается помимо visibility: hidden; ещё и его местоположение, то есть position: ...; z-index: ...; left: ...; top: ... Таки образом собственно получается, что нет разницы между горизонтальным меню и вертикальным - главное точно указать его координаты, где каждая менюшка должна появляться. Каждому DIV присваивается какой-то уникальный id, например id="submenu1"

2. Каждому пункту меню назначается событие по которому будет выполняться функция отображения выпадающего меню и скрытие остальных выпавших меню при подносе к другим пунктам заглавного меню.
onmouseOver="java script:showmenu(тутномерпунктаменю);"

3. Ну а скрипт в HEAD страницы очень прост:
<script language="JavaScript">
function showmenu(LayerId)
{
//количество выпадающих подменюшек
var quantityofsub = 10,
i;

//цикл на закрытие всех ранее возможно открытых подменюшек
for(i=0;i<quantityofsub+1;i++) {
document.getElementById(1).style.visibility='hidden';
}
//ну и собственно открытие того пункта подменю, который нужен
document.getElementById(LayerId).style.visibility='visible';
}
</script>