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>
Опция Значение по умполч. Тип Описание
1 см. описание.
2 Опция также может быть функцией, которая возвращает допустимое значение. Внутри этой функции относится к логике HTML-элемента.
extensions [] Array Набор подключаемых дополнений к данному меню.
initMenu     Информирует о вызове меню
(
$menu   jQuery Меню
$orig   jQuery Оригинальное меню, если клонировали (true).
)
initPanels     Информирует о повторной инициализации парелей
(
$panels   jQuery Панели реинициализированы.
)
navbar      
{
add true Boolean Добавлять панели?
title "Menu" String Заголовок главной панели.
titleLink "parent" String Тип ссылки для заголовков.
Возможные варианты: "parent", "anchor" или "none".
}
onClick      
{
close null 1 Boolean 2 Независимо от того или нет меню следует закрыть после нажатия на ссылку внутри него.
Значение по умолчанию изменяется на одно звено: true, если поведение по умолчанию для кликнутой ссылки предотвращается, false в противном случае.
preventDefault null 1 Boolean 2 Независимо от того или нет предотвращаем поведение по умолчанию для кликнули ссылки.
Значение по умолчанию изменяется на одно звено: true, если его HREF равно или начинается с хэш (#), false в противном случае.
setSelected true Boolean 2 Будь или не нажатая ссылка видна, когда "selected".
}
slidingSubmenus true Boolean Независимо от того или нет подменю должны скользить справа. Если false, подменю выплывают ниже своего родителя.
Для того, чтобы расширить одну подменю ниже его родительского элемента, добавить класс "Vertical" к нему.

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

<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>

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

Опции Значение по умолч. Тип данных Описание
1 Значение должно соответствовать значению CSS.
className      
{
divider "Divider" String Имя класса для LI должно быть отображено в идентификаторе.
inset "Inset" String Класс для подменю должен отображаться (для последующих UL), как стандартный список.
panel "Panel" String Класс для элемента который идентифицирует панель
selected "Selected" String Выбранный класс для LI.
vertical "Vertical" String Класс для последующих UL
}
clone false Boolean клонировать ли меню
openingInterval 25 Number Время отображения меню
panelNodetype "div, ul, ol" String jQuery идентификатор для выборки
transitionDuration 400 1 Number Время в миллисекундах для CSS transitions

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

MMenu
Официальный сайт

Файлы MMenu:

Скачать MMenu
DEMO