четверг, января 24, 2008

Скрипт - вертикально раскрывающееся меню

Скрипт - вертикально раскрывающееся меню, по клику на элемент меню другие сворачиваются



Содержимое файла script.js:

var id_menu = new Array('sub_menu_1','sub_menu_2');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}

В head вашего html линкуем созданный файл скрипта:

<script language="JavaScript" type="text/javascript" src="scripts/script.js"></script> 


В body закрываем все открымые элементы подменю

<body onload="allclose()">  

А вот и само меню:

<ul class="leftmenu">
<li><a href="#" onClick="openMenu('sub_menu_1');return(false)">Законодательство</a>
<ul id="sub_menu_1" >
<li><a href="#">Законодательство</a></li>

<li><a href="#">Структуры и ведомства</a></li>
<li><a href="#">Статьи о недвижимости</a></li>
<li><a href="#">Документы для строительства</a></li>

<li><a href="#">Экологическая карта</a></li>
</ul>
</li>
<li><a href="#" onClick="openMenu('sub_menu_2');return(false)" >Структуры и ведомства</a>
<ul id="sub_menu_2" >

<li><a href="#">Законодательство</a></li>
<li><a href="#">Структуры и ведомства</a></li>
<li><a href="#">Статьи о недвижимости</a></li>

<li><a href="#">Документы для строительства</a></li>
<li><a href="#">Экологическая карта</a></li>
</ul>
</li>
</ul>

6 комментариев:

Анонимный комментирует...

не заработало у меня

Анонимный комментирует...

Всё работает. %)

Анонимный комментирует...

Просто и полезно)
Спасибо большое!

potembo комментирует...

Всё здорово, если не работает, то, скоре всего, неверно указал путь к файлу скрипта

Mago комментирует...

Большое спасибище!! все работает, осталось по колдовать со стилями и будет ваще красиво))

Анонимный комментирует...

Вот вы все такие умные, а как его установить не написал. Тут есть люди, которые не совсем это понимают, ты сам наверное где то скопировал и понятия не имеешь как этот скрипт поставить! Больше на этот блог не зайду, гавно, а не блог!!!!