waSlideMenu.js — Многоуровневое прокручивающееся меню
jQuery-плагин, который превращает вложенное (древовидное) меню в систему прокручивающихся меню.
Репозиторий: github.com/webasyst/waslidemenuПопробовать: jsfiddle.net/7LnSY/Пример: demo-ru.webasyst.comЗадача сделать такое меню появилась в процессе работы над новой темой дизайна для приложений Webasyst. В качестве прототипа рассматривались навигационные меню, которые можно встретить на большинстве планшетов и смартфонов на базе iOS, Android и т.д. В вебе был найден только один красивый прототип реализации такого меню — в хелп-центре Facebook. Готовых простых решений для такого меню не нашли, поэтому написали свой плагин. Плагин бесплатный (MIT) — пользуйтесь на здоровье.Подключение
Структура меню
Работает на любой вложенной структуре вне зависимости от разметки: ul li, div и т.д.
Инициализация плагина
Просто:
$('#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.
Полезные ссылки
Еще раз: ссылка на репозиторий и демо. Буду благодарен за отзывы и предложения!
