Creating A Responsive Mobile Navigation Menu with slicknav jQuery Plugin

slicknav is a simple and easy-to-use jQuery menu plugin for creating a responsive & cross-browser multi-level navigation menu on your website. The plugin makes use of CSS media queries to hide the original menu and display the mobile menu when appropriate.

More Features:

• Responsive, smart and flexible.
• Customizable menu sliding animation.
• Optional easing animation supported.
• Keyboard Accessible.

How to use it:

1. Include required jQuery slicknav stylesheet file in the head section of your page.

<link rel="stylesheet" href="slicknav.css">

2. Create an unordered list for the mobile menu.

<ul id="menu">
<li>Home
<ul>
<li><a href="https://www.jqueryscript.net/Blog/">Blog</a></li>
<li>jQuery Plugins
<ul>
<li><a href="https://www.jqueryscript.net/jquery-plugins/">Latest</a></li>
<li><a href="https://www.jqueryscript.net/popular/">Most Popular</a></li>
<li><a href="https://www.jqueryscript.net/recommended/">Recommended</a></li>
</ul>
</li>
<li><a href="#">Publishing</a></li>
</ul>
</li>
<li><a href="#">Top Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</li>
</ul>

3. Using CSS media queries to hide original menu on mobile devices.

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

4. Load the latest jQuery javascript library and jQuery slicknav plugin at the bottom.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slicknav.js"></script> 

5. Include jQuery UI or jQuery easing plugin for easing options. (OPTIONAL)

<script src="jquery.easing.1.3.js"></script>

6. Call the plugin with options.

$(document).ready(function(){

$('#menu').slicknav({

// Label for menu button. 
// Use an empty string for no label.
'label' : 'MENU', 

// If true, the mobile menu is a copy of the original.
'duplicate': true, 

// The duration of the sliding animation.
'duration': true, 

// Easing used for open animations.
'easingOpen': 'swing', 

// Easing used for close animations.
'easingClose': 'swing', 

// open / close symbols
closedSymbol: '►',
openedSymbol: '▼',

// Element, jQuery object, or jQuery selector string to prepend the mobile menu to.
'prependTo': 'body', 

// Element, jQuery object, or jQuery selector string to append the mobile menu to.
appendTo: '',

// Element type for parent menu items.
'parentTag': 'a', 

// Close menu when a link is clicked.
'closeOnClick': false,

// Allow clickable links as parent elements.
allowParentLinks: false,

// If false, parent links will be separated from the sub-menu toggle.
nestedParentLinks: true,

// Show children of parent links by default.
showChildren: false,

// Remove IDs from all menu elements.
removeIds: true,

// Remove classes from all menu elements.
removeClasses: false,

// Remove styles from all menu elements.
removeStyles: false,

// Add branding to menu bar.
brand: '',

// Animation library. Currently supports "jquery" and "velocity".
animations: 'jquery',

// Called after SlickNav creation
init: function () {},

// Called before menu or sub-menu opened
beforeOpen: function () {},

// Called before menu or sub-menu closed
beforeClose: function () {},

// Called after menu or sub-menu opened.
afterOpen: function () {},

// Called after menu or sub-menu closed.
afterClose: function () {}

});

});

7. Public methods.

// toggle the menu
$('#menu').slicknav('toggle');

// open the menu
$('#menu').slicknav('open');  

// close the menu
$('#menu').slicknav('close'); 

8. Write some CSS to make the original menu presentable.

ul#menu {...}

Change logs:

v1.0.10 (2016-10-05)

• Version bump and Velocity.js fix
• Ensure Keyboard variable declared

v1.0.8 (2016-09-20)

• Add support for Velocity.js animations and stop animation queue before animating.
• Significantly better ARIA keyboard support

v1.0.7 (2016-03-24)

• bugfix

v1.0.5 (2015-11-30)

• Menu button sizing for Firefox Mobile v42. 

v1.0.4 (2015-06-07)

• Variable assignment fix
• Fix symbols if showChildren true

2015-04-23

• v1.0.3

2015-03-21

• Update+fix

2014-08-12

• Update.

2014-05-29

• Fix toggle method.

2014-03-28

• Fix close on click multilevel bug

2013-12-17

• menu toggle fixes

 

---

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