Responsive Overflow Off-canvas Navigation Plugin With jQuery - okayNav

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.