Responsive Overflow Off-canvas Navigation Plugin With jQuery - okayNav
File Size: | 26.1 KB |
---|---|
Views Total: | 10312 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

okayNav is a responsive and mobile-friendly jQuery navigation plugin that automatically hides overflowing items and shows them in an off-canvas sidebar navigation when screen's size is too small to fit all menu items.
Basic usage:
1. Include the stylehsheet okayNav.css
in the header to provide primary CSS styles for the plugin.
<link rel="stylesheet" href="okayNav.css">
2. Create a horizontal site navigation from a nav list.
<nav role="navigation" id="nav-main" class="okayNav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Most Popular</a></li> <li><a href="#">Recommended</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">About us</a></li> <li><a href="#">Blog</a></li> </ul> </nav>
3. Include the JavaScript file jquery.okayNav.min.js
after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.okayNav.min.js"></script>
4. Call the plugin on the nav list and done.
$('#nav-main').okayNav();
5. Options and defaults.
$('#nav-main').okayNav({ // will call nav's parent() by default parent : '', // Html & CSS for the toggle button toggle_icon_class : 'okayNav__menu-toggle', toggle_icon_content: '<span /><span /><span />', // Will trigger before the nav gets opened beforeopen : function() {}, // Will trigger after the nav gets opened open : function() {}, // Will trigger before the nav gets closed beforeclose : function() {}, // Will trigger after the nav gets closed close : function() {}, });
This awesome jQuery plugin is developed by VPenkov. For more Advanced Usages, please check the demo page or visit the official website.