pushMenu is based on Manoela llic's Multi Level Push Menu, but implemented with jQuery.
- Multiple level menu support
- Infinite menu level nesting
- Cross browser compatibility (IE9+, Chrome, Firefox, Safari, Opera, Android Browser, iOS Safari)
bower install --save push-menu
npm install push-menu --save
<link rel="stylesheet" href="dist/css/stylesheet.css" />
There is also a SCSS file available inside the source
<script src="dist/js/jquery.pushMenu.min.js"></script>
<div class="site">
<div class="site-outer">
<nav class="mp-menu mp-cover" id="mp-menu">
<div class="mp-level">
<ul>
<li><a title="CLOSE X" href="javascript:;" class="mp-back">CLOSE X</a></li>
<li><a title="" href="/">Home</a></li>
<li><a title="" href="">Menu item 1</a></li>
<li><a title="Menu item 2" href="javascript:;">Menu item 2 ></a>
<div class="mp-level">
<a href="javascript:;" class="mp-back">BACK</a>
<strong>Menu item 2</strong>
<ul class="sub-menu third-level">
<li><a title="" href="">Menu item 2.1</a></li>
<li><a title="" href="">Menu item 2.2</a></li>
<li><a title="" href="">Menu item 2.3</a></li>
<li><a title="" href="">Menu item 2.4</a></li>
<li><a title="" href="">Menu item 2.5</a></li>
</ul>
</div>
</li>
<li><a title="" href="">Menu item 3</a></li>
<li><a title="" href="">Menu item 4</a></li>
<li>
<a title="Menu item 5" href="javascript:;">Menu item 5 ></a>
<div class="mp-level">
<a href="javascript:;" class="mp-back">BACK</a>
<strong>Menu item 5</strong>
<ul class="sub-menu third-level">
<li><a title="" href="">Menu item 5.1</a></li>
<li><a title="" href="">Menu item 5.2</a></li>
<li>
<a title="Menu item 5.3" href="javascript:;">Menu item 5.3 ></a>
<div class="mp-level">
<a href="javascript:;" class="mp-back">BACK</a>
<strong>Menu item 5.3</strong>
<ul class="sub-menu third-level">
<li><a title="" href="">Menu item 5.3.1</a></li>
<li><a title="" href="">Menu item 5.3.2</a></li>
<li><a title="" href="">Menu item 5.3.3 ></a></li>
<li><a title="" href="">Menu item 5.3.4</a></li>
<li><a title="" href="javascript:;">Menu item 5.3.5 ></a>
<div class="mp-level">
<a href="javascript:;" class="mp-back">BACK</a>
<strong>Menu item 5.3.5</strong>
<ul class="sub-menu third-level">
<li><a title="" href="">Menu item 5.3.5.1</a></li>
<li><a title="" href="">Menu item 5.3.5.2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a title="" href="">Menu item 5.4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<div class="site-wrapper">
<div class="site-container">
<h1><a href="javascript:;" id="trigger" class="burger" title="Open"></a> jquery pushMenu v2.0.7</h1>
<h2>Site content</h2>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#mp-menu').pushMenu({
type: 'overlap',
levelSpacing: 0,
backClass: 'mp-back',
trigger: '#trigger',
pusher: '.site-outer',
scrollTop: false
});
});
</script>
type: 'cover' // cover || overlap - Whether the menu level should overlap slightly or completely cover each other
levelSpacing: 0 // If the 'type' is set to overlap how much should be visible from the previous level
backClass: 'mp-back' // The back button class
trigger: '#trigger' // What should open the menu on click / touch
pusher: '.site-outer' // What should be moved when the menu opens - The plugin relies on moving the site out of the way to make way for the menu
scrollTop: false // true || false - If set to true when moving between levels the screen will automatically scroll back to the top
- Add some additional examples
- IE8 to play nicely
- Option to slide menu in from the right
- Main content of the site should be fixed to the page when menu is open and not scroll with the menu
- Add callback for onOpen
- Add callback for onClose
- Add method to open menu programmatically at a specific level
- Add method to close menu
- Add option to choose whether to close menu on body click
- Add option if level has an arbitrary active class menu opens at this level again