![]() |
|
Модераторы: Sardar, Aliance |
![]()
|
|
| ursula16 |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 35 Регистрация: 4.7.2007 Репутация: нет Всего: нет |
Доброго времени суток! В общем есть меню типа
Как сделать,чтобы при нажатии на ссылку(onClick) под ней появлялись пункты подменю? И чтобы при повторном onClick все сворачивалось? Еще необходимо запоминать какой пункт меню раскрыт... Хелп плс... |
|||
|
||||
| Rigel |
|
|||
![]() Шустрый ![]() Профиль Группа: Участник Сообщений: 122 Регистрация: 24.7.2007 Где: Москва Репутация: нет Всего: нет |
Во-первых, зачем запоминать? Сворачивай все, потом развернешь нужный.
Как сделать, чтобы появлялись подменю? Сначала их нужно выложить, со стилем display:none; причем все в одно место. Невидимки для форматирования не имеют размера, и в любой контейнер можно напихать их сколько угодно. Ну а потом - обходишь их все подряд и ставишь у нужного тебе display:block; Выпадающее меню - несложная штука. Вытяни пример из моего сайта (адрес в подписи), он строится системой администрирования из SQL-таблицы, но для примера это значения не имеет, разве что скрипт у меня жесткий, пересоздающий файлы при изменении таблицы, потому что проще посчитать один раз, при создании js-файла, чем крутить цикл скриптом на каждом клиенте. --------------------
С уважением. Rigel. http://www.smoliy.ru |
|||
|
||||
| ursula16 |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 35 Регистрация: 4.7.2007 Репутация: нет Всего: нет |
Спс,как создать сами блоки я знаю... Интересует как написать функцию, чтобы при первом нажатии onClick меню раскрывалось, а при повторном закрывалось...
|
|||
|
||||
| Rigel |
|
|||
![]() Шустрый ![]() Профиль Группа: Участник Сообщений: 122 Регистрация: 24.7.2007 Где: Москва Репутация: нет Всего: нет |
Вот функция с моего сайта (точнее, ее кусочек)
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">В порядке поступления</a> <a href="allpoem.php" class="sm1" target="_top">Одним файлом</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">Технические серии</a> <a href="cycphoto.php" class="sm1" target="_top">Циклы фотографий</a> <a href="palbum.php" class="sm1" target="_top">Последние поступления</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> Последние </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> Детство </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> О себе </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> Раннее детство </a></td></tr> Только ведь все это можно на сайте посмотреть - если воспользоваться функцией браузера "сохранить как", он вытянет все пристяжные файлы. Собственно, расчитывая на это я не привел пример в первый раз. Это сообщение отредактировал(а) Rigel - 25.7.2007, 10:33 --------------------
С уважением. Rigel. http://www.smoliy.ru |
|||
|
||||
| ursula16 |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 35 Регистрация: 4.7.2007 Репутация: нет Всего: нет |
Спасибо большое, терь все понятно, сделано и работает
|
|||
|
||||
![]()
|
| Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию. |
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | JavaScript: Общие вопросы | Следующая тема » |
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |