Раскрывающееся меню

 
0
 
JavaScript
ava
ursula16 | 24.07.2007, 11:34
Доброго времени суток! В общем есть меню типа

<a href=mobiles.php>Мобильные телефоны</a><br>
<a href=tvs>Телевизоры</a><br>
<a href=computers>Компьютеры</a><br>

Как сделать,чтобы при нажатии на ссылку(onClick) под ней появлялись пункты подменю? И чтобы при повторном onClick все сворачивалось? Еще необходимо запоминать какой пункт меню раскрыт... Хелп плс... smile
Comments (4)
ava
Rigel | 24.07.2007, 11:58 #
Во-первых, зачем запоминать? Сворачивай все, потом развернешь нужный.
Как сделать, чтобы появлялись подменю? Сначала их нужно выложить, со стилем display:none; причем все в одно место. Невидимки для форматирования не имеют размера, и в любой контейнер можно напихать их сколько угодно. Ну а потом - обходишь их все подряд и ставишь у нужного тебе display:block;
Выпадающее меню - несложная штука. Вытяни пример из моего сайта (адрес в подписи), он строится системой администрирования из SQL-таблицы, но для примера это значения не имеет, разве что скрипт у меня жесткий, пересоздающий файлы при изменении таблицы, потому что проще посчитать один раз, при создании js-файла, чем крутить цикл скриптом на каждом клиенте. smile
ava
ursula16 | 25.07.2007, 07:40 #
Спс,как создать сами блоки я знаю... Интересует как написать функцию, чтобы при первом нажатии onClick меню раскрывалось, а при повторном закрывалось... smile
ava
Rigel | 25.07.2007, 10:26 #
Вот функция с моего сайта (точнее, ее кусочек)
function wmen(wdis)
{
document.getElementById('ul14').style.display='none';
if(wdis == 14){document.getElementById('ul14').style.display='block';}
document.getElementById('ul6').style.display='none';
if(wdis == 6){document.getElementById('ul6').style.display='block';}
}

function wdon()
{
document.getElementById('ul14').style.display='none';
document.getElementById('ul6').style.display='none';
}

А вот ее вызов:
<div class="uk14" id="uk14">
<a href="index.php" onMouseOver="javascript:wmen(14)" class="mmnuit">Главная</a>
</div>
<div class="uk6" id="uk6">
<a href="poemlst.php" onMouseOver="javascript:wmen(6)" class="mmnuit">Стихи</a>
</div>
<div class="ul6" id="ul6">
<a href="poemass.php" class="sm1" target="_top">Сборники</a>
<a href="poems.php" class="sm1" target="_top">В&nbsp;порядке&nbsp;поступления</a>
<a href="allpoem.php" class="sm1" target="_top">Одним&nbsp;файлом</a>
</div>
<div class="ul7" id="ul7">
<a href="portfolio.php" class="sm1" target="_top">Портфолио</a>
<a href="album.php?a=2" class="sm1" target="_top">Зарисовки-Подмосковье</a>
<a href="album.php?a=1" class="sm1" target="_top">Зарисовки-Москва</a>
<a href="album.php?a=3" class="sm1" target="_top">Зарисовки-Прочее</a>
<a href="album.php?a=4" class="sm1" target="_top">Портреты</a>
<a href="album.php?a=5" class="sm1" target="_top">Черно-белые</a>
<a href="album.php?a=6" class="sm1" target="_top">Технические&nbsp;серии</a>
<a href="cycphoto.php" class="sm1" target="_top">Циклы&nbsp;фотографий</a>
<a href="palbum.php" class="sm1" target="_top">Последние&nbsp;поступления</a>
</div>

А внизу у этого меню полоса, пересечение мышки которой сворачивает меню:
<div class="dmenu">
<p align="center"><a href="#" onMouseOver="wdon()"><img src="img/nsel.gif" height="100%" width="100%" border=0></a>
</div>

Есть варианты меню без этой полосы, смотрите, например, на незаконченном сайте моей жены http://kora.tokamak.ru/ Там функция закрытия меню вызывается не по пересечению грызуном границы меню, а по onMouseOut, что, в принципе, реализуется столь же легко:
<div class=uk16>
<a href="menuh.php?men=16" onMouseOver="javascript:wmen(16)" onMouseOut="wdon()" class="mmnuit">О себе</a>
</div>
<div class=um16>
<a href="menuh.php?men=16" onMouseOver="javascript:wmen(16)" onMouseOut="wdon()" class="mmnuit"><img src=img/nsel.gif border=0 height= width=></a>
</div>
<table border=0 cellpadding=0 cellspacing=0 class=mtbl><tr class=mtbl><td bgcolor=#3c62ae class=mtbl><a href="palbum.php" onMouseOver="javascript:wmen(2)" onMouseOut="wdon()" class="sm1"><img src=img/nsel.gif height=9 width=100 border=0><br>&nbsp;Последние&nbsp;</a></td></tr>
<tr class=mtbl><td bgcolor=#3c62ae class=mtbl><a href="palbum.php?a=3" onMouseOver="javascript:wmen(2)" onMouseOut="wdon()" class="sm1"><img src=img/nsel.gif height=9 width=100 border=0><br>&nbsp;Детство&nbsp;</a></td></tr>
<tr class=mtbl><td bgcolor=#3c62ae class=mtbl><a href="palbum.php?a=1" onMouseOver="javascript:wmen(2)" onMouseOut="wdon()" class="sm1"><img src=img/nsel.gif height=9 width=100 border=0><br>&nbsp;О&nbsp;себе&nbsp;</a></td></tr>
<tr class=mtbl><td bgcolor=#3c62ae class=mtbl><a href="palbum.php?a=2" onMouseOver="javascript:wmen(2)" onMouseOut="wdon()" class="sm1"><img src=img/nsel.gif height=9 width=100 border=0><br>&nbsp;Раннее&nbsp;детство&nbsp;</a></td></tr>


Только ведь все это можно на сайте посмотреть - если воспользоваться функцией браузера "сохранить как", он вытянет все пристяжные файлы. Собственно, расчитывая на это я не привел пример в первый раз. smile
ava
ursula16 | 25.07.2007, 12:42 #
Спасибо большое, терь все понятно, сделано и работает smile3
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  ursula16   Rigel
advanced
Submit