Features

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

Usage Instructions

Include the CSS & JS

slicknav.css can be modified to fit website design

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

Menu Markup

<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>

Initialize

<script>
	$(function(){
		$('#menu').slicknav();
	});
</script>

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;
	}
}

Available Options

Property	Default	Description
label	"MENU"	Label for menu button. Use an empty string for no label.
duplicate	true	If true, a copy of the menu element is made for the mobile menu. This allows for separate functionality for both mobile and non-mobile versions.
duration	200	The duration of the sliding animation.
easingOpen	"swing"	Easing used for open animations. "Swing" and "Linear" are available with jQuery. More easing functions are available with the use of plug-ins, such as jQuery UI.
easingClose	"swing"	Easing used for close animations. "Swing" and "Linear" are available with jQuery. More easing functions are available with the use of plug-ins, such as jQuery UI.
closedSymbol	"►"	Character after collapsed parents..
openedSymbol	"▼"	Character after expanded parents.
prependTo	"body"	Element, jQuery object, or jQuery selector string for the element to prepend the mobile menu to.
appendTo	""	Element, jQuery object, or jQuery selector string to append the mobile menu to. Takes precedence over prependTo.
parentTag	"a"	Element type for parent menu items. Anchor tag is recommended for accessibility.
closeOnClick	false	Close menu when a link is clicked. Useful when navigating within a single page.
allowParentLinks	false	Allow clickable links as parent elements.
nestedParentLinks	true	If false, parent links will be separated from the sub-menu toggle.
showChildren	false	Show children of parent links by default.
removeIds	true	Remove IDs from all menu elements. Defaults to false if duplicate set to false.
removeClasses	false	Remove classes from all menu elements.
brand	""	Add branding to menu bar.
animations	"jquery"	Animation library. Currently supports "jquery" and "velocity".

Callbacks

Property	Parameters	Description
init	function(){}	Called after SlickNav creation.
beforeOpen	function(trigger){}	Called before menu or sub-menu opened.
afterOpen	function(trigger){}	Called after menu or sub-menu opened.
beforeClose	function(trigger){}	Called before menu or sub-menu closed.
afterClose	function(trigger){}	Called after menu or sub-menu closed.

Methods

Method	Description
$('.menu').slicknav('toggle');	Method to toggle the menu.
$('.menu').slicknav('open');	Method to open the menu.
$('.menu').slicknav('close');	Method to close the menu.

Examples

Basic Demo

HTML

<ul id="menu">
	<li><a class="scroll" href="#features">Features</a></li>
	<li><a class="scroll" href="#usage">Usage Instructions</a></li>
	<li><a class="scroll" href="#examples">Examples</a></li>
	<li><a href="http://github.com">View on Github</a></li>
</ul>

JavaScript

$('#menu').slicknav({
		prependTo:'#demo1'
});

Advanced Demo

HTML

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

JavaScript

$('#menu2').slicknav({
	label: '',
	duration: 1000,
	easingOpen: "easeOutBounce", //available with jQuery UI
	prependTo:'#demo2'
});

Requirements & Browser Support

Requires jQuery 1.7+

Tested Browsers:

• Chrome
• Firefox
• Safari
• Opera
• IE7+
• Android Browser
• iOS Safari