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.

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