Nickolay.info. Javascript. Простое раскрывающееся меню с помощью JQuery

С помощью прекрасной библиотеки JQuery на яваскрипте написано очень много различных меню, "каруселек" для картинок и других украшений. Зачастую вся эта красота сложна и непонятна, а хочется сделать просто, быстро и стандартно. Именно для таких случаев предназначен этот пример.

Нам понадобятся:

Оба этих файла прилагаются в архиве.

В исходнике учтена более-менее типовая ситуация -

Исходники, по возможности, закомменированы. Стиль и весь код лежат в одном файле 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 Кб)

Рейтинг@Mail.ru

вверх гостевая; E-mail