Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Раскрывающееся меню


Автор: ursula16 24.7.2007, 10:34
Доброго времени суток! В общем есть меню типа
Код

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

Как сделать,чтобы при нажатии на ссылку(onClick) под ней появлялись пункты подменю? И чтобы при повторном onClick все сворачивалось? Еще необходимо запоминать какой пункт меню раскрыт... Хелп плс...  smile 

Автор: Rigel 24.7.2007, 11:58
Во-первых, зачем запоминать? Сворачивай все, потом развернешь нужный. 
Как сделать, чтобы появлялись подменю? Сначала их нужно выложить, со стилем display:none; причем все в одно место. Невидимки для форматирования не имеют размера, и в любой контейнер можно напихать их сколько угодно. Ну а потом - обходишь их все подряд и ставишь у нужного тебе display:block; 
Выпадающее меню - несложная штука. Вытяни пример из моего сайта (адрес в подписи), он строится системой администрирования из SQL-таблицы, но для примера это значения не имеет, разве что скрипт у меня жесткий, пересоздающий файлы при изменении таблицы, потому что проще посчитать один раз, при создании js-файла, чем крутить цикл скриптом на каждом клиенте. smile 

Автор: ursula16 25.7.2007, 07:40
Спс,как создать сами блоки я знаю... Интересует как написать функцию, чтобы при первом нажатии onClick меню раскрывалось, а при повторном закрывалось...  smile 

Автор: Rigel 25.7.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 

Автор: ursula16 25.7.2007, 12:42
Спасибо большое, терь все понятно, сделано и работает  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)