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

jQuery-плагин, который превращает вложенное (древовидное) меню в систему прокручивающихся меню.
941988cf674ad982956457e544a0f7ea
Репозиторий: 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.

 

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

 


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