Facebook Like jQuery Responsive Sliding Navigation Menu - waSlideMenu

waSlideMenu is a jQuery plugin to create a responsive, mobile-like, list-style, nested sliding navigation menu as you seen in Facebook help page.

See also:

• Responsive jQuery Mobile-Style Sliding Menu Plugin

How to use it:

1. Include the jQuery waSlideMenu plugin's stylesheet file in the header.

<link rel="stylesheet" href="css/waslidemenu.css">

2. Include the jQuery javascript library and jQuery waSlideMenu plugin's Javascript in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.waslidemenu.js"></script> 

3. Wrap the nested menu items in the Html elements like DIVs or unordered lists.

<div id="demo">
<div class="menus">

<div class="items parent"> Menu 1
<div class="menus">
<div class="items"> Menu 1.1 </div>
<div class="items"> Menu 1.2 </div>
<div class="items"> Menu 1.3 </div>
</div>
</div>

<div class="items parent"> Menu 2
<div class="menus">
<div class="items parent"> Menu 2.1
<div class="menus">
<div class="items"> Menu 2.1.1 </div>
<div class="items"> Menu 2.1.2 </div>
<div class="items"> Menu 2.1.3 </div>
</div>
</div>
</div>
</div>

...

</div>
</div>

4. Call the plugin on the parent element.

<script>
$('#demo').waSlideMenu({
menuSelector: '.menus',
itemSelector: '.items'
});
</script>

5. Default options and callbacks.

<script>
$('#demo').waSlideMenu({
namespace   : 'wa',

slideSpeed  : 400,
slideEasing : 'linear',
backLinkContent     : 'Back',
backOnTop   : false,
selectedClass       : 'selected',
loadContainer       : '',
minHeightMenu       : 0,
autoHeightMenu      : true,
excludeUri  : ['/', '#'],
loadOnlyLatest      : false,
menuSelector: 'ul',
itemSelector: 'li',
setTitle    : false,
scrollToTopSpeed    : 0,

/* Callbacks */
onInit      : null,
onSlideForward      : null,
onSlideBack : null,
onLatestClick       : null,
afterSlide  : null,
beforeLoad  : null,
afterLoadAlways     : null,
afterLoadDone       : null,
afterLoadFail       : null,

/* class names */
classNames: {
    navigationClass : '-nav',
    wrapperClass    : '-wrapper',
    allMenusClass   : '-menu',
    inheritedMenuClass      : '-inheritedmenu',
    menuItemBackClass       : '-back',
    loadingClass    : '-loading'
}
</script>

Change log:

v1.0.7 (2014-05-23)

• Added beforeLoad callback

---

This awesome jQuery plugin is developed by webasyst. For more Advanced Usages, please check the demo page or visit the official website.