Responsive & Mobile-Aware jQuery Dropdown Navigation Plugin - responsiveNav

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

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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>
</li>
</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 plugin with options.

<script>
$(document).ready(function(){
$('#nav').responsiveNav({
smallWidthMax: 730
});
});
</script>

4. More available options.

<script>
$(document).ready(function(){
$('#nav').responsiveNav({
generateMenuHandle:true, // This generates a options.menuHandleText element. The tag is intended for an icon.
menuHandleText:'Menu',
generateBackLinks:false, // This generates a Back element at the top of a parent's child list. 
backLinkText:'Back',
generateSubSectionLinks:true, // This generates a copy of the parent link and places it in its child list, since parent only reveal their children during "small" behavior.
subSectionLinkExists:function($a, $ul){
return $ul.find('> li > a[href="'+$a.attr('href')+'"]').length;
},
sectionSecondTapGo:true, // Goes to the URL the section link specifies, after it has been clicked to reveal its children.
generateFocusIcons:true,
generateGoIcons:true,
hoverIntentTime: 400
});
});
</script>

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