waSlideMenu.js. Multi-level scrolling menu

jQuery plugin that turns a nested (tree) menu into a scrolling menu system.

Repository: github.com/webasyst/waslidemenu
Try it: jsfiddle.net/7LnSY/
Example: demo-.webasyst.com

The task to make such a menu appeared in the process of working on a new design theme for Webasyst applications. As a prototype, we considered navigation menus that can be found on most tablets and smartphones based on iOS, Android, etc. In the web, only one beautiful prototype of the implementation of such a menu was found - in the help center of Facebook . There were no ready-made simple solutions for such a menu, so they wrote their own plugin. Plugin free (MIT) - use on health.

Connection

<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> 

Menu structure

Works on any nested structure regardless of markup: ul li, div, etc.

 <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> 

Plug-in initialization

Simply:

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

Or you can add a few settings:

 $('#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') } }); 

Settings

• menuSelector: '.menu' - selector for the menu, defaults to ul;
• itemSelector: '.item' - selector for menu items, default is li;
• autoHeightMenu: true - automatically sets the height of the submenu after the transition;
• minHeightMenu: 400 - minimum menu height during initialization and subsequent height changes;
• backLinkContent: 'Back please' - the content for the link "Back";
• backOnTop: true - select the location of the “Back” link;
• scrollToTopSpeed: 200 - scroll speed of the page up to the "current" menu item. There are moments when, after the slide to the next submenu, its items disappear from the visible area. In this case, the page scroll up to the selected menu item.
• slideSpeed: 500 - the speed of the slide menu;
• Other possible settings are detailed in the README on github.

Callbacks

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

• onInit - triggered immediately after initialization of the menu;
• onSlideForward - called after the transition to the level "deep into" the menu;
• onSlideBack - called after going back a level;
• afterSlide - triggered after the completion of the menu slide;
• onLatestClick - called after clicking on the extreme menu item;
• afterLoadAlways - always called, regardless of the result of loading the URL;
• afterLoadDone - called after successful loading of the URL.

Other features and requirements

• The plugin can be connected to an unlimited number of menus on the page.
• It can load the necessary content, sets the Title of the page, changes the URL in the address bar of the browser.
• It works well in various browsers (IE9 +), on smartphones and tablets.
• All kinds of callback and events.
• You must use jQuery 1.7+.
• MIT license.

useful links

• jQuery Patterns . The first thing is to find and read on the topic of creating jQuery plugins.
• JavaScript Patterns Collection . Comrade from the Middle Kingdom gathered a lot of useful material on one page.
• A couple of slides about the jQuery UI widget factory. Next time I will use only $ .widget.

Once again: link to the repository and demo . I would be grateful for the feedback and suggestions!