Responsive & Mobile-Aware jQuery Dropdown Navigation Plugin - responsiveNav

File Size: 121 KB
Views Total: 5863
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive & Mobile-Aware jQuery Dropdown Navigation Plugin - responsiveNav

Just another jQuery mobile menu plugin that turns a horizontal multi-level navigation into a mobile friendly toggle menu on small screen devices.

How to use it:

1. Load the required jQuery library and other resources in the document.

<link rel="stylesheet" href="css/styles.css" />
<script src="jquery.min.js"></script>
<script src="js/jquery.responsiveNav.js"></script>

2. Create a normal multi-level navigation menu using nested Html lists.

<div id="nav">
  <ul>
    <li><a href="#"> Menu 1 </a>
      <ul>
        <li><a href="#"> Menu 1.1 </a></li>
        <li><a href="#"> Menu 1.2 </a></li>
      </ul>
    </li>
    <li><a href="#"> Menu 2 </a>
      <ul>
        <li><a href="#"> Menu 2.1 </a></li>
        <li><a href="#"> Menu 2.2 </a></li>
        <ul>
          <li><a href="#"> Menu 2.2.1 </a></li>
          <li><a href="#"> Menu 2.2.2 </a></li>
        </ul>
      </ul>
    </li>
    <li><a href="#"> Menu 3 </a>
      <ul>
        <li><a href="#"> Menu 3.1 </a></li>
        <li><a href="#"> Menu 3.2 </a></li>
      </ul>
    </li>
    <li><a href="#"> Menu 4 </a>
      <ul>
        <li><a href="#"> Menu 4.1 </a></li>
        <li><a href="#"> Menu 4.2 </a></li>
      </ul>
    </li>
    <li><a href="#"> Menu 5 </a>
      <ul>
        <li><a href="#"> Menu 5.1 </a></li>
        <li><a href="#"> Menu 5.2 </a></li>
      </ul>
    </li>
  </ul>
</div>

3. Initialize the responsive nav on document ready and done.

$(document).ready(function(){
  $('#nav').responsiveNav({
    // options here
  });
});

4. Possible options to customize the responsive nav.

$('#nav').responsiveNav({

  // auto generate menu handle
  generateMenuHandle: true,

  // text for menu handle
  menuHandleText:'Menu',

  // generate back links
  generateBackLinks:false,

  // text for back links
  backLinkText:'Back',

  // generate sub-section links
  generateSubSectionLinks:true,
  subSectionLinkExists:function($a, $ul){
    return $ul.find('> li > a[href="'+$a.attr('href')+'"]').length;
  },

  // go to specific links
  sectionSecondTapGo:true,

  // generate "plus" icon or "down" arrow
  generateFocusIcons:true,

  // generate "right" icon
  generateGoIcons:true,

  // for hover intent
  hoverIntentTime: 400

});

Changelog:

2019-12-18

  • Added href to generated anchor tags for keyboard navigation

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