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.