waSlideMenu.js — Многоуровневое прокручивающееся меню

jQuery-плагин, который превращает вложенное (древовидное) меню в систему прокручивающихся меню.

Репозиторий: github.com/webasyst/waslidemenu
Попробовать: jsfiddle.net/7LnSY/
Пример: demo-ru.webasyst.com

Задача сделать такое меню появилась в процессе работы над новой темой дизайна для приложений Webasyst. В качестве прототипа рассматривались навигационные меню, которые можно встретить на большинстве планшетов и смартфонов на базе iOS, Android и т.д. В вебе был найден только один красивый прототип реализации такого меню — в хелп-центре Facebook. Готовых простых решений для такого меню не нашли, поэтому написали свой плагин. Плагин бесплатный (MIT) — пользуйтесь на здоровье.

Подключение

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

Структура меню

Работает на любой вложенной структуре вне зависимости от разметки: ul li, div и т.д.

<nav id="menu"> 	<ul> 		<li> 			<a href="#1">Parent 1</a> 			<ul> 				<li><a href="#1.1">Child 1.1</a> 					<ul> 						<li><a href="#1.1.1">We need to go deeper</li> 					</ul> 				</li> 				<li><a href="#1.2">Child 1.2</a></li> 			</ul> 		</li> 		<li><a href="#2">Parent 2</a></li> 		<li><a href="#2">Parent 3</a></li> 	</ul> </nav> 

<nav id="menu"> 	<div class="menu"> 		<div class="item"> 			<a href="#1">1</a> 			<div class="menu"> 				<div class="item"><a href="#1.1">1.1</a></div> 				<div class="item"><a href="#1.2">1.2</a></div> 			</div> 		</div> 		<div class="item"><a href="#2">2</a></div> 		<div class="item"><a href="#3">3</a></div> 	</div> </nav> 

Инициализация плагина

Просто:

$('#menu').waSlideMenu(); 

Или можно добавить немного настроек:

$('#menu').waSlideMenu({     menuSelector : '.menu',     itemSelector : '.item',     autoHeightMenu: true,     minHeightMenu: 400,     backLinkContent: 'Back please',     backOnTop: true,     scrollToTopSpeed: 200,     slideSpeed: 500,     onLatestClick: function(){         alert('Last node ' + $(this).text() + ' selected')     } }); 

Настройки

• menuSelector: ‘.menu’ — селектор для меню, по умолчанию ul;
• itemSelector: ‘.item’ — селектор для пунктов меню, по умолчанию li;
• autoHeightMenu: true — автоматически устанавливает высоту по высоте подменю после перехода;
• minHeightMenu: 400 — минимальная высота меню при инициализации и последующих изменениях высоты;
• backLinkContent: ‘Back please’ — контент для ссылки «Назад»;
• backOnTop: true — выбор расположения расположения ссылки «Назад»;
• scrollToTopSpeed: 200 — скорость прокрутки страницы вверх до «текущего» пункта меню. Возникают моменты, когда после слайда к следующему подменю его пункты пропадают из видимой области. В этом случае страница прокрутиться наверх, до выбранного пункта меню.
• slideSpeed: 500 — скорость слайда меню;
• Другие возможные настройки подробно расписаны в README на github.

Callbacks

$('#menu').waSlideMenu({ 	onInit : function(){         alert('Here I am!');     },     onLatestClick: function(){         alert('Last node ' + $(this).text() + ' selected')     } }); 

• onInit — срабатывает сразу после инициализации меню;
• onSlideForward — вызывается после перехода на уровень «вглубь» меню;
• onSlideBack — вызывается после перехода на уровень назад;
• afterSlide — срабатывает после завершения слайда меню;
• onLatestClick — вызывается после клика на крайнем пункте меню;
• afterLoadAlways — вызывается всегда, независимо от результат загрузки URL;
• afterLoadDone — вызывается после успешной загрузки URL.

Другие фичи и требования

• Плагин можно подключать к неограниченному количеству меню на странице.
• Может подгружать необходимый контент, устанавливает Title страницы, меняет URL в адресной строке браузера.
• Неплохо работает в различных браузерах (IE9+), на смартфонах и планшетах.
• Всевозможные callback и events.
• Надо использовать jQuery 1.7+.
• Лицензия MIT.

Полезные ссылки

• jQuery Patterns. Первое, что стоит найти и прочитать по теме создания jQuery плагинов.
• JavaScript Patterns Collection. Товарищъ из Поднебесной собрал на одной странице очень много полезного материала.
• Пара слайдов о фабрике виджетов jQuery UI. В следующий раз буду использовать только $.widget.

Еще раз: ссылка на репозиторий и демо. Буду благодарен за отзывы и предложения!