MMenu

MMenu – это адаптивное многоуровневое меню для любого сайта. Вместе с данным jQuery плагином, Вы сможете создать на своем сайте не только удобное, но и понятное меню, рассчитанное для всех устройств (телефонов, планшетов, компьютеров). Изначально данное меню вызывается по нажатию на кнопку. Выезжает с нужной Вам стороны.

Для выполнения скрипта требуется jQuery библиотека. Если она уже есть на странице, то повторно вызывать её нет необходимости.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

Подключение самого меню лучше всего, конечно же, осуществлять непосредственно в уже имеющихся JS и CSS файлах, но так тоже можно:

<script src="/path/to/jquery.mmenu.min.js" type="text/javascript">
</script><link href="/path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
<link href="/path/to/jquery.mmenu.themes.css" type="text/css" rel="stylesheet" />

Если к странице не подключены другие JS файлы, то добавьте в head следующие строки:

<script type="text/javascript">
   jQuery(document).ready(function( $ ) {
      $("#menu").mmenu();
   });
</script>

Тем самым Вы вызовите подключение скрипта MMenu для блока с ID="menu"

Для того, чтобы вызывать различные опции необходимо соблюдать следующий синтаксис:

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // опции
      });
   });
</script>

Синтаксис конфигурации:

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // опции
      }, {
         // конфигурация
      });
   });
</script>

Пример конфигурации:

$("nav#menu").mmenu({
"extensions": [
"effect-menu-zoom",
"effect-panels-zoom",
"pagedim-black",
"theme-dark"
],
searchfield: true,
counters: true,
navbar : {
title: '<span class="icon-list"></span> Меню сайта:'
},
navbars: [
{
position: 'top',
content: [ 'searchfield' ]
}, {
position: 'top',
content: [
'prev',
'title',
'close'
]
}, {
position: 'bottom',
content: [
'<a href="/"><span class="icon-home"></span> перейти на главную</a>'
]
}
],
"iconPanels": true
});

HTML структура с примерами вложенности:

<nav id="menu" class="navigation" role="navigation">
<ul class="nav menu">
<li class="item-101 current active"><a class="gl" href="#" >Главная</a></li>
<li class="item-102 deeper parent"><a class="vy" href="#" >Видео уроки</a>
 <ul class="nav-child unstyled small">
 <li class="item-104"><a class="lf" href="#" >Жизнь</a></li>
 <li class="item-103"><a class="vywb" href="#" >Компьютер</a></li>
 </ul>
</li>
<li class="item-105 deeper parent"><a class="df" href="#" >Док. фильмы</a>
 <ul class="nav-child unstyled small">
 <li class="item-108"><a class="mir" href="#" >Мир</a></li>
 <li class="item-106"><a class="war" href="#" >Война</a></li>
 <li class="item-107"><a class="pwr" href="#" >Власть</a></li>
 </ul>
</li>
<li class="item-124 deeper parent"><a class="boo" href="#" >Книги</a>
 <ul class="nav-child unstyled small">
 <li class="item-125"><a class="edubok" href="#" >Обучение</a></li>
 <li class="item-126"><a class="smr" href="#" >Саморазвитие</a></li>
 <li class="item-127"><a class="hud" href="#" >Разные</a></li>
 </ul>
</li>
<li class="item-109"><a class="ns" href="#" >Новости</a></li>
<li class="item-110"><a class="rz" href="#" >Разное</a></li>
<li class="item-111 deeper parent"><a class="pr" href="#" >Программы</a>
 <ul class="nav-child unstyled small">
 <li class="item-112"><a class="aud" href="#" >Аудио</a></li>
 <li class="item-113"><a class="sec" href="#" >Безопасность</a></li>
 <li class="item-114"><a class="vid" href="#" >Видео</a></li>
 <li class="item-115"><a class="gra" href="#" >Графика</a></li>
 <li class="item-116"><a class="discfls" href="/programmy/diski-i-fajly" >Диски и файлы</a></li>
 <li class="item-117"><a class="inet" href="/programmy/internet" >Интернет</a></li>
 <li class="item-118"><a class="edu" href="/programmy/obuchenie" >Обучение</a></li>
 <li class="item-119"><a class="dev" href="#" >Разработчику</a></li>
 <li class="item-120"><a class="sys" href="#" >Системы</a></li>
 <li class="item-121"><a class="offc" href="#" >Офис</a></li>
 <li class="item-122"><a class="othrprog" href="#" >Другие</a></li>
 </ul>
</li>
<li class="item-123"><a class="wb" href="#" >Web</a></li>
<li class="item-128"><!--noindex--><a rel="nofollow" class="and" href="http://android.usemind.org" >Приложения для Андроид</a><!--/noindex--></li>
<li class="item-129"><!--noindex--><a rel="nofollow" class="mlt" href="http://multik.usemind.org" >Мультфильмы</a><!--/noindex--></li>
<li class="item-130"><!--noindex--><a rel="nofollow" class="nf" href="http://needfull.net" >Клипы, стихи, рецепты...</a><!--/noindex--></li>
<li class="item-131"><!--noindex--><a rel="nofollow" class="i" href="http://inverser.pro/skripty" >Скрипты для сайтов</a><!--/noindex--></li>
<li class="item-132"><!--noindex--><a rel="nofollow" class="s" href="http://inverser.pro/4-zakazat-sajt" >Заказать сайт</a><!--/noindex--></li>
</ul>
</nav>

Таблица конфигурации:

Различные эффекты доступны по данной ссылке.

Файлы MMenu: