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.

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


    Еще раз: ссылка на репозиторий и демо. Буду благодарен за отзывы и предложения!
    Webasyst
    Company
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 14

      +1
      Лучший скриптик меню для тыкания в тачскрин из тех, что я видел. Схоронил.
        +2
        Сталкивался как-то с подобной задачей.
        Реализация плавного сдвига — хорошая идея. Но очень важная составляющая упущена: наличие хлебных крошек.
        Если на представленном примере вполне понятен предыдущий/следующий уровень (океан/страна/город), то зачастую меню сайтов не всегда имеет очевидную связь между родительскими и дочерними пунктами. Человек путается на каком уровне он находится, и в каком разделе находится.

        Решение здесь простое: добавление хлебных крошек, клик по которым так же бы переносил пользователя на нужный уровень.
        Еще один вариант есть: родительские разделы свертываем в бок, как здесь jquer.in/jquery-navigation-and-menu-plugins-from-2012/multi-level-push-menu/ (можно либо иконки, либо поворачивать текст на 90 deg)

        а так — в избранное, конечно.
          +3
          Кстати, если список большой, то кнопка «назад» потеряется и будет неудобно висеть в самом низу. Ее можно сделать (при варианте с хлебными крошками) боковой полоской слева/справа с иконкой "<"
          +3
          Выскажу свое сугубо личное имхо: по-моему, было бы эргономичнее, если бы пункт «Back please» располагался первым в списке и, как вариант, почему бы не дать возможность возврата в корень (например, разбив этот пункт на два).

          Каляки-маляки

          I'm just saying, nothing personal..
            +3
            Пункт назад можно поместить в самый верх с помощью опции backOnTop: true.
            Разбивка да, интересный вариант, чтобы не кликать как сумасшедший до первого уровня)
              0
              Это же — шаг на пути к хлебным крошкам из верхнего пожелания.
                +1
                Для длинных менюх пригодилась бы возможность иметь кнопку «Назад» и сверху, и снизу.
                  0
                  Или сделать её положение на экране фиксированным, что бы была видна всегда, как это часто встречается в мобильных UI.
                +2
                Еще как вариант добавить определение touch-events и сделать действие назад по перемещению пальца вправо
                +4
                Плагины jQuery: возрождение.
                  0
                  А они разве умирали? :)
                  +1
                  Помню тоже искал такое меню. ИМХО, вот это лучше.

                  Ссылка не вставилась: bit.ly/1nIAltf
                    0
                    Еще можно поддержку easing сделать.
                      +1
                      Вообще уже есть настройка slideEasing. Так что можно подключить jQueryUI, например, и использовать easing.

                    Only users with full accounts can post comments. Log in, please.