This time I will share jQuery Plugin and tutorial about Responsive Multi-level Dropdown & Toggle Menu Plugin With jQuery, hope it will help you in programming stack.
Yet another jQuery plugin used to create a responsive dropdown navigation menu that automatically switches to a mobile-friendly toggle menu when the window width reaches a specified breakpoint.
How to use it:
1. Load the required stylesheet toggle-nav.css in the header to style the responsive navigation menu.
1 |
<link href="toggle-nav.css" rel="stylesheet"> |
2. Create a normal responisve multi-level dropdown menu following the markup structure as this:
01 |
<header class="main" id="siteheader"> |
03 |
<nav id="menu" class="menu"> |
05 |
<li><a href="">Item 1</a></li> |
06 |
<li><a href="">Item 2</a><span class="has-subnav">▼</span> |
07 |
<ul class="wide level-2"> |
08 |
<li><a href="">Child Item 1</a></li> |
09 |
<li><a href="">Child Item 2</a></li> |
10 |
<li><a href="">Child Item 3</a></li> |
13 |
<li><a href="">Item 3</a><span class="has-subnav">▼</span> |
15 |
<li><a href="">Child Item 1</a></li> |
16 |
<li><a href="">Child Item 2</a></li> |
19 |
<li><a href="">Item 4</a></li> |
20 |
<li><a href="">Item 5</a></li> |
3. Load jQuery library and the Responsive Toggle Nav plugin’s JavaScript at the end of the document.
1 |
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> |
2 |
<script src="toggle-nav.js"></script> |
4. That’s it. Modify and override the CSS rules in the toggle-nav.css to create your own menu styles.
This awesome jQuery plugin is developed by chriscather. For more Advanced Usages, please check the demo page or visit the official website.
