Minimalist Responsive Dropdown Menu Plugin With jQuery - mainNavigation
File Size: | 8.32 KB |
---|---|
Views Total: | 2491 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
mainNavigation is a simple, lightweight jQuery plugin for generating a multi-level dropdown menu that automatically collapses into an off-canvas menu in mobile view.
Main features:
- Sticky menu supported.
- Push menu or overlay menu supported.
- Custom content overlay when menu opened.
How to use it:
1. Create the multi-level dropdown menu from a nested html list, like this:
<div id="mainNav-container"> <button id="mainNav-toggle" type="button" class=""> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul id="mainNav-menu" class="mainNav-menu mainNav-horizontal"> <li class="mainNav-dropdown"> <a href="#">Item 1</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li class="mainNav-dropdown"> <a href="#">Item 4</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li class="mainNav-dropdown"> <a href="#">Sub Item 5</a> <ul> <li><a href="#">Sub Sub Item 1</a></li> <li><a href="#">Sub Sub Item 2</a></li> <li><a href="#">Sub Sub Item 3</a></li> </ul> </li> <li><a href="#">Sub Item 6</a></li> <li><a href="#">Sub Item 7</a></li> </ul> </li> <li><a href="#">Item 5</a></li> </ul> </div>
2. Wrap the main content into the container 'push-mainNav-container'.
<div class="container push-mainNav-container"> Main content go here </div>
3. Put the jQuery mainNavigation plugin's stylesheet in the head section of your webpage.
<link href="nav.css" rel="stylesheet">
4. Put jQuery library and the jQuery mainNavigation plugin's JavaScript at the bottom of your webpage.
<script src="jquery.js"></script> <script src="mainNav.js"></script>
5. Initialize the plugin and done.
$('#mainNav-container').mainNav();
6. Possible plugin options.
$('#mainNav-container').mainNav({ // left || right || top responsiveFrom: "left", // enable sticky navigation stickyNav: false, // enable push menu pushNav: false, // overlay options hasOverlay: true, overlayColor: "#000", opacity: ".7" });
This awesome jQuery plugin is developed by ragalan. For more Advanced Usages, please check the demo page or visit the official website.