jPushMenu, jQuery version of Slide and Push Menus

jPushMenu Demo

Click button to show/hide menu

Changelog

1.1.1 : Add return false; on button/link.
1.1 : Add closeOnClickOutside parameter.
1.0 : Initial release

How to use?

Include required style

<link rel="stylesheet" type="text/css" href="css/jPushMenu.css" />

Include required script

<!--load jQuery, required-->
<script src="js/jquery-1.9.1.min.js"></script>
<!--load jPushMenu, required-->
<script src="js/jPushMenu.js"></script>

<!--call jPushMenu, required-->
<script>
jQuery(document).ready(function($) {
	$('.toggle-menu').jPushMenu();
});
</script>

Make button or link

The class names are self explained.

<button class="toggle-menu menu-left">Toggle Left Menu</button>
<button class="toggle-menu menu-left push-body">Toggle Left Menu Push</button>

<button class="toggle-menu menu-right">Toggle Right Menu</button>
<button class="toggle-menu menu-right push-body">Toggle Right Menu Push</button>

<button class="toggle-menu menu-top">Toggle Top Menu</button>
<button class="toggle-menu menu-bottom">Toggle Bottom Menu</button>

Make menu element

<!-- Left menu element-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<!-- Right menu element-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<!-- Top menu element-->
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<!-- Bottom menu element-->
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>