Responsive & Mobile-Aware jQuery Dropdown Navigation Plugin - responsiveNav

File Size: 121 KB
Views Total: 5934
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">
    <li><a href="#"> Menu 1 </a>
        <li><a href="#"> Menu 1.1 </a></li>
        <li><a href="#"> Menu 1.2 </a></li>
    <li><a href="#"> Menu 2 </a>
        <li><a href="#"> Menu 2.1 </a></li>
        <li><a href="#"> Menu 2.2 </a></li>
          <li><a href="#"> Menu 2.2.1 </a></li>
          <li><a href="#"> Menu 2.2.2 </a></li>
    <li><a href="#"> Menu 3 </a>
        <li><a href="#"> Menu 3.1 </a></li>
        <li><a href="#"> Menu 3.2 </a></li>
    <li><a href="#"> Menu 4 </a>
        <li><a href="#"> Menu 4.1 </a></li>
        <li><a href="#"> Menu 4.2 </a></li>
    <li><a href="#"> Menu 5 </a>
        <li><a href="#"> Menu 5.1 </a></li>
        <li><a href="#"> Menu 5.2 </a></li>

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

    // options here

4. Possible options to customize the responsive nav.


  // auto generate menu handle
  generateMenuHandle: true,

  // text for menu handle

  // generate back links

  // text for back links

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

  // go to specific links

  // generate "plus" icon or "down" arrow

  // generate "right" icon

  // for hover intent
  hoverIntentTime: 400




  • 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.