Nickolay.info. Javascript. Простое раскрывающееся меню с помощью JQuery |
С помощью прекрасной библиотеки JQuery на яваскрипте написано очень много различных меню, "каруселек" для картинок и других украшений. Зачастую вся эта красота сложна и непонятна, а хочется сделать просто, быстро и стандартно. Именно для таких случаев предназначен этот пример.
Нам понадобятся:
Оба этих файла прилагаются в архиве.
В исходнике учтена более-менее типовая ситуация -
div
'ов;
+
", слева;
leftmenublock.jpg
и leftmenublockinside.jpg
).Исходники, по возможности, закомменированы. Стиль и весь код лежат в одном файле index.html
.
Ссылки в примере никуда не ведут, точней, ведут на пустую закладку #
.
Можно сделать так, чтобы при открытии любого подменю другие подменю не закрывались -
закомментарьте, то есть, заключите в символы /* */
строки кода между строчными комментариями
//Когда открыто подменю, свернуть остальные подменю ... //Конец блока сворачивания остальных подменю
Дополнительно на этой же странице приведён стиль и пример для простейшего горизонтального меню с подсветкой пунктов. Оно также сделано в виде списка.
Пример кода вертикального раскрывающегося меню:
<ul id="myvertmenu" class="vertmenu"> <li><a href="#0">Пункт меню 1</a></li></li> <li><a href="#0">Ещё один пункт меню</a></li> <li><a href="#0">А это уже подменю 1</a> <ul> <li><a href="#0">Пункт 1.1</a></li> <li><a href="#0">Пункт 1.2</a></li> <li><a href="#0">Пункт 1.3</a></li> </ul> </li> <li><a href="#0">Страны</a> <ul> <li><a href="#0">Страна 1</a></li> <li><a href="#0">Страна 2</a></li> </ul> </li> <li><a href="#0">Страхование</a></li> </ul>
Просто, не правда ли, обычное вложение списков.
Пример в работе:
Скачать всё в архиве ZIP, в коде могут быть мелкие отличия (27 Кб)
P.S. Для большего удобства прилагаю ещё один архив, где код Javascript, картинки и стили "разбросаны" по папкам
js
, img
и css
соответственно, как обычно и делается в "движках". Код для управления меню тоже "лежит" в отдельном файле
js/jquery.simplemenu.js
. Обращаю внимание, что id="myvertmenu"
указывается в теге, открывающем меню, обязательно, а класс,
к которому относится меню, называется class="vertmenu"
.
Скачать всё в архиве ZIP (28 Кб)
гостевая; E-mail |