get started with mobile awesomeness

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 "&#9658;" Character after collapsed parents..
openedSymbol "&#9660;" 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