Multi-level push menu v2.1.4 by Momcilo Dzunic
Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.
Following basic, lightweight release v1, version v2 brings number of exposed plug-in methods (NEW! Redraw, Visible menus, Hidden menus, Propagate events), options (NEW! Full menu collapse) and events/callbacks (onMenuReady and onMenuSwipe added). Release v2 now supports native mobile events. (NEW! Expand/Collapse navigation with a left/right swipe gesture)
Fork on GitHub Download v2 Download v1
This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).
Features
- Multi-level menu support
- Endless nesting of navigation elements
- Expand/Collapse navigation with a left/right swipe gesture
- Push/Slide DOM elements of choice
- Left-to-right and Right-to-left sliding directions
- Flexible, simple markup
- JS Array input, as HTML markup replacement
- A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
- Cross-browser compatibility
- Chrome
- Midori
- Firefox
- Safari
- IE8+
- Opera 12.16
- Android Browser 4.1.2
- iOS Safari 7.0.1
Video
Swiping menus is also supported on desktops using mouse events, but it's more natural to be used on touch devices.
(video could be a bit choppy; for real experience open demo pages using your touch enabled device)
Usage
Include the CSS
"multilevelpushmenu.css" can be modified to fit website design.
FontAvesome (icons)
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">Font I like (use any other you like)
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>Multi-Level-Push-Menu
<link rel="stylesheet" href="multilevelpushmenu.css" />Include the JS
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>Modernizr (needed for IE8)
<script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>Multi-Level-Push-Menu
<script src="jquery.multilevelpushmenu.min.js></script>HTML Markup
Copy HTML markup below to create menu with exacty the same items like shown in Demo.
<div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>All Categories</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>Devices</a>
<h2><i class="fa fa-laptop"></i>Devices</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div>JS Array (instead HTML Markup)
You can use JS Array instead of above HTML markup.
<script>
var arrMenu = [
{
title: 'All Categories',
id: 'menuID',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
id: 'itemID',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script>Initialize
With HTML markup.
<script>
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
</script>With JS Array.
<script>
$(document).ready(function(){
$('#menu').multilevelpushmenu({
menu: arrMenu
});
});
</script>Options
Full list of options is provided below.
container: $( '#menu' ), // Holding container.
containersToPush: [ $( '#content1' ), $( '#content2' ) ], // Array of DOM elements to push/slide together with menu.
collapsed: false, // Initialize menu in collapsed/expanded mode
menuID: 'multilevelpushmenu', // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
menu: arrMenu, // JS array of menu items (if markup not provided).
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
backText: 'Back', // Text for 'Back' menu item.
backItemClass: 'backItemClass', // CSS class for back menu item.
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
mode: 'overlap', // Menu sliding mode: overlap/cover.
overlapWidth: 40, // Width in px of menu wrappers overlap
preventItemClick: true, // set to false if you do not need event callback functionality
preventGroupItemClick: true, // set to false if you do not need event callback functionality
direction: 'ltr', // set to 'rtl' for reverse sliding direction
fullCollapse: false, // set to true to fully hide base level holder when collapsed
swipe: 'both' // or 'touchscreen', or 'desktop'Methods
Full list of exposed methods is provided below.
/**
* Initialize menu
*/
$('#menu').multilevelpushmenu();
// or
$('#menu').multilevelpushmenu('init');
/**
* Collapse menu
*/
// Full collapse
$('#menu').multilevelpushmenu('collapse');
// Collapse menu down to level 1 (0 level represent root level expanded)
$('#menu').multilevelpushmenu('collapse', 1);
// Collapse menu down to the level of $menuLevelObject
$('#menu').multilevelpushmenu('collapse', $menuLevelObject);
// Collapse menu down to the level of menu level object with title 'Devices' (not really recommended since there could be many menu level objects with the same title; in such cases collasing will be unsuccessful)
$('#menu').multilevelpushmenu('collapse', 'Devices');
/**
* Expand menu
*/
// Menu expand from fully collapsed mode to level 0
$('#menu').multilevelpushmenu('expand');
// Expand menu up to the $menuLevelObject
$('#menu').multilevelpushmenu('expand', $menuLevelObject);
// Expand menu up to the menu level object with title 'Devices' (not recommended since there could be many menu level objects with the same title; in such cases expanding will be unsuccessful)
$('#menu').multilevelpushmenu('expand', 'Devices');
/**
* Menu Expanded?
* Check if menu level object is already expanded (returns true/false)
*/
$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject);
/**
* Active (last expanded) menu level
* Returns active menu level object, or false if menu is fully collapsed
*/
$('#menu').multilevelpushmenu('activemenu');
/**
* Find menu level(s) by title
* Provides collection of menu level objects matching provided menu title, or false if there is no match
*/
$('#menu').multilevelpushmenu('findmenusbytitle', 'Devices');
/**
* Find menu item(s) by name
* Provides collection of menu item objects matching provided name, or false if there is no match
*/
$( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Devices' );
/**
* Find path to root of selected menu level object
* Provides chain collection of menu level objects (root menu level object to given menu level object), or false in case of error
*/
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject);
/**
* Find shared path or path differences of two given menu level objects
* Provides collection of shared menu level objects of two menu level objects if bool parameter is set to true, or collection of menu level objects representing differences if bool is false; or false if there is no match
*/
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, bool);
// Shared path collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, true);
// Differences collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, false);
/**
* Get or Set plug-in options
* Get (if third parameter is not set) or Set selected plug-in option
*/
// Get
$('#menu').multilevelpushmenu('option', 'mode');
// Set
$('#menu').multilevelpushmenu('option', 'mode', 'cover');
/**
* Add/Remove menu item(s) with sub-menus
*
*/
// Add
$('#menu').multilevelpushmenu( 'additems' , itemsArray , $addToMenu , position );
// Remove
$('#menu').multilevelpushmenu( 'removeitems' , items );
/**
* Redraw menus
*
*/
$('#menu').multilevelpushmenu( 'redraw' );
/**
* Visible menus
*
*/
$('#menu').multilevelpushmenu( 'visiblemenus' );
/**
* Hidden menus
*
*/
$('#menu').multilevelpushmenu( 'hiddenmenus' );
/**
* Propagate event to underneath layer
*
*/
$( '#menu' ).multilevelpushmenu( 'propagateevent' , $( '#menu' ) , 'mousedown' );Responsive menu example
<script>
$( '#menu' ).multilevelpushmenu({
menuWidth: '20%',
menuHeight: '100%'
});
$( window ).resize(function() {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script>Events/Callbacks
Full list of events/callbacks is provided below.
Each callback provides following arguments. (use console.log(arguments) inside callback method to see)
onMenuReady:, onCollapseMenuStart:, onCollapseMenuEnd:, onExpandMenuStart:, onExpandMenuEnd:: plug-in options object.
onTitleItemClick:, onBackItemClick:: event object, menu level object, plug-in options object.
onGroupItemClick:, onItemClick:: event object, menu level object, clicked item object, plug-in options object.
onCollapseMenuStart: // Menu collapse started
onCollapseMenuEnd: // Menu collapse ended
onExpandMenuStart: // Menu expand started
onExpandMenuEnd: // Menu expand ended
onGroupItemClick: // Click/touchstart menu item containing sub-items
onItemClick: // Click/touchstart menu item which doesn't contain sub-items
onTitleItemClick: // Title icon click/touchstart
onBackItemClick: // Back item click/touchstart
onMenuReady: // Menu created and ready for use
onMenuSwipe: // Menu swipe initiatedAn event callback example
Each event triggers a callback; An example using onItemClick event callback functionality.
<script>
$( '#menu' ).multilevelpushmenu({
onItemClick: function() {
// First argument is original event object
var event = arguments[0],
// Second argument is menu level object containing clicked item (<div> element)
$menuLevelHolder = arguments[1],
// Third argument is clicked item (<li> element)
$item = arguments[2],
// Fourth argument is instance settings/options object
options = arguments[3];
// You can do some cool stuff here before
// redirecting to href location
// like logging the event or even
// adding some parameters to href, etc...
// Anchor href
var itemHref = $item.find( 'a:first' ).attr( 'href' );
// Redirecting the page
location.href = itemHref;
}
});
</script>Managing custom DOM object events when using swiping on desktops
If you will use swiping menus on desktops, mousedown bubble will be canceled and therefore any DOM object placed within menu item won't get focus when clicked. To overcome this you can use originally triggered event returned as onItemClick's first argument. Below is an example showing how to set focus on input element, http://jsfiddle.net/5rjg9/1/
<script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onItemClick: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') {
$(e.target).focus();
$(e.target).val('focused');
$(e.target).unbind('blur');
$(e.target).blur(function(){
$(e.target).val('blured');
});
}
}
});
});
</script>or, http://jsfiddle.net/c5EA4/6/
<script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onMenuSwipe: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') return false;
}
});
});
</script>Alternatively, you can set swipe option to 'touchscreen' and allow swiping menus only on touch-screen enabled devices.
Examples
Basic (HTML Markup)
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
});
</script>Cover mode
<script>
$(document).ready(function(){
// HTML markup implementation, cover mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
mode: 'cover'
});
});
</script>Full menu collapse
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
fullCollapse: true
});
});
</script>Responsive menu
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: '25%',
menuHeight: '100%'
});
});
$(window).resize(function () {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script>Initialize collapsed
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, initilaize collapsed
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
collapsed: true
});
});
</script>Right-to-left sliding
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, rigth-to-left sliding
$( '#menu' ).multilevelpushmenu({
direction: 'rtl',
backItemIcon: 'fa fa-angle-left',
groupIcon: 'fa fa-angle-right'
});
});
</script>Custom size
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: 450, // '450px', '30em', '25%' will also work
menuHeight: 500
});
});
</script>Push many containers
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, push 3 DOM elements
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' ), $( '#pushthisobjalso' ), $( '#pushthisobjtoo' )]
});
});
</script>Get/Set options
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Get value for mode option
$( '#getMode' ).click(function(){
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
// Set value for mode option
$( '#setMode' ).click(function(){
// Collapse menu first to ensure good functionality after mode change
$( '#menu' ).multilevelpushmenu( 'collapse', 0 );
// Toggle mode
$( '#menu' ).multilevelpushmenu( 'option', 'mode') == 'overlap' ?
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'cover' ) ) : $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'overlap' ) );
// Update getMode button info
$( '#getMode' ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
});
</script>Expand/Collapse options
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Full collapse
$( '#fullcollapse' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'collapse' );
});
// Base expand
$( '#baseexpand' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'expand' );
});
// Expand to Men's Clothing
$( '#expandmensclothing' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Expand to Mobile Phones
$( '#expandmobilephones' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Mobile Phones' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Collapse to the level of 'Devices' menu
$( '#collapsedevices' ).click(function(){
// Have in mind that this will collapse to the level of 'Devices'
// menu (level 1 in our case). So even when open path is not containing
// 'Devices' menu it will collapse expanded menus to level 1; it's
// basically the same as
// $( '#menu' ).multilevelpushmenu( 'collapse' , 1 );
$( '#menu' ).multilevelpushmenu( 'collapse' , 'Devices' );
});
});
</script>Add/Remove items
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Expand to Mobile Phones where we will add two
// additional menu items with sub-menus
$( '#menu' ).multilevelpushmenu( 'expand' , $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first() );
// Add iPhone and Samsung items to Mobile Phones menu at position 0
$( '#additems' ).click(function(){
var $addTo = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
$( '#menu' ).multilevelpushmenu( 'additems' , addItems , $addTo , 0 );
})
// Remove Samsung item
$( '#removeitems' ).click(function(){
var item = $( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Samsung' );
$( '#menu' ).multilevelpushmenu( 'removeitems' , item );
})
});
var addItems = [
{
name: 'iPhone',
id: 'iPhoneItem',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'iPhones',
id: 'iPhonesMenu',
icon: 'fa fa-phone-square',
items: [
{
name: 'iPhone 4',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'iPhone 5',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
},
{
name: 'Samsung',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'Samsung',
icon: 'fa fa-phone-square',
items: [
{
name: 'Samsung Galaxy S II',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S III',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S IV',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
}
];
</script>Events
<script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
onCollapseMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started collapsing...' );
//console.log(arguments);
},
onCollapseMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Collapsing ended!' );
//console.log(arguments);
},
onExpandMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started expanding...' );
//console.log(arguments);
},
onExpandMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Expanding ended!' );
//console.log(arguments);
},
onTitleItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Title item <i>' + title + '</i> clicked!' );
//console.log(arguments);
},
onBackItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Back item on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onGroupItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Group Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
}
});
});
</script>Basic (JS Array)
<script>
$(document).ready(function(){
// JS Array implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
menu: arrMenu,
containersToPush: [$( '#pushobj' )]
});
});
// JS Aray instead HTML Markup
var arrMenu = [
{
title: 'All Categories',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script>License
Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php