Creating A Responsive Mobile Navigation Menu with slicknav jQuery Plugin
File Size: | 23.7 KB |
---|---|
Views Total: | 59146 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.