Paneled-Style Navigation Menu Plugin - jPanelMenu

Paneled-Style Navigation Menu Plugin - jPanelMenu
File Size: 361 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jPanelMenu is a clean and modern jQuery menu that helps to create a Paneled-Style Navigation with CSS3 transitions anitmations for your web application or website. jPanelMenu is inspired by the mobile versions of Facebook and Google and has been used in a wide variety of mobile applications. 

Basic Usage:

1. Include necessary javascript files on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="modernizr-2.6.1.min.js"></script>
<script src="respond.js"></script>
<script src="highlight.min.js"></script>
<script src="jquery.jpanelmenu.min.js"></script>
<script src="plugins.js"></script>

2.  Markup HTML Structure

<a href="#menu">&#xED50;</a>
<nav>
<ul>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 1</a></li>
<li><a href="#menu3">Menu 1</a></li>
...
</ul>
</nav>

3. The CSS

#jPanelMenu-menu {
background: #3b3b3b
}
#jPanelMenu-menu ul {
border-bottom: 1px solid #484848
}
#jPanelMenu-menu li a {
background: #3b3b3b;
background: -o-linear-gradient(top, #3e3e3e, #383838);
background: -ms-linear-gradient(top, #3e3e3e, #383838);
background: -moz-linear-gradient(top, #3e3e3e, #383838);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #383838));
background: -webkit-linear-gradient(#3e3e3e, #383838);
background: linear-gradient(top, #3e3e3e, #383838);
font-family: "museo-sans", "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-weight: 700;
display: block;
padding: 0.5em 5%;
border-top: 1px solid #484848;
border-bottom: 1px solid #2e2e2e;
text-decoration: none;
text-shadow: 0 -1px 2px #222;
color: #f7f7f7
}
#jPanelMenu-menu li a:hover, #jPanelMenu-menu li a:focus {
background: #404040;
background: -o-linear-gradient(top, #484848, #383838);
background: -ms-linear-gradient(top, #484848, #383838);
background: -moz-linear-gradient(top, #484848, #383838);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #484848), color-stop(1, #383838));
background: -webkit-linear-gradient(#484848, #383838);
background: linear-gradient(top, #484848, #383838)
}
#jPanelMenu-menu li a:active {
background: #363636;
background: -o-linear-gradient(top, #3e3e3e, #2e2e2e);
background: -ms-linear-gradient(top, #3e3e3e, #2e2e2e);
background: -moz-linear-gradient(top, #3e3e3e, #2e2e2e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #2e2e2e));
background: -webkit-linear-gradient(#3e3e3e, #2e2e2e);
background: linear-gradient(top, #3e3e3e, #2e2e2e);
-moz-box-shadow: 0 2px 7px #222 inset;
-webkit-box-shadow: 0 2px 7px #222 inset;
box-shadow: 0 2px 7px #222 inset;
border-top-color: #222;
padding-top: 0.55em;
padding-bottom: 0.45em
}
.jPanelMenu-panel {
-moz-box-shadow: 0 0 25px #222;
-webkit-box-shadow: 0 0 25px #222;
box-shadow: 0 0 25px #222
}

4. Call the plugin with options

var jPanelMenu = {};
$(function() {
	$('pre').each(function(i, e) {hljs.highlightBlock(e)});
	
	jPanelMenu = $.jPanelMenu({
		menu: 'header.main nav',
		animated: false
	});
	jPanelMenu.on();

	$(document).on('click',jPanelMenu.menu + ' li a',function(e){
		if ( jPanelMenu.isOpen() && $(e.target).attr('href').substring(0,1) == '#' ) { jPanelMenu.close(); }
	});

	$(document).on('click','#trigger-off',function(e){
		jPanelMenu.off();
		$('html').css('padding-top','40px');
		$('#trigger-on').remove();
		$('body').append('<a href="" title="Re-Enable jPanelMenu" id="trigger-on">Re-Enable jPanelMenu</a>');
		e.preventDefault();
	});

	$(document).on('click','#trigger-on',function(e){
		jPanelMenu.on();
		$('html').css('padding-top',0);
		$('#trigger-on').remove();
		e.preventDefault();
	});
});

Change logs:

2014-11-12

  • Added touchend support. 

2013-12-10

  • Fixed jRespond demo.
  • Added keepEventHandlers option to transform build.
  • Added functionality to preserve event handlers in clone. This allows controls to be added to the menu.

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