Slicknav - A responsive nav jQuery plugin

Slicknav is a responsive nav jQuery plugin

Features:

• Multi-level menu support
• Flexible, simple markup
• Cross-browser compatibility
• Keyboard Accessible
• Degrades gracefully without JavaScript
• Creates ARIA compliant menu

Source: slicknav.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>

2. HTML

<ul id="menu">
	<li><a href="#">item 1</a></li>
	<li><a href="#">item 2</a></li>
	<li><a href="#">item 3</a></li>
	<li><a href="#">item 4</a></li>
</ul>

3. JAVASCRIPT

$(function(){
	$('#menu').slicknav();
});

Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.

For example:

.slicknav_menu {
	display:none;
}

@media screen and (max-width: 40em) {
	/* #menu is the original menu */
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}

4. OPTIONS

5. METHODS

6. CALLBACKS