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

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

• библиотека JQuery;
• плагин к ней jquery.cookie.

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

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

• хочется размеcтить меню легко, без кучи непонятных 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