This time I will share jQuery Plugin and tutorial about Hamburger Dropdown Menu With jQuery – Clarity.js, hope it will help you in programming stack.
| File Size: | 5.6 KB |
|---|---|
| Views Total: | 78 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Clarity.js is an ultra-light, jQuery/CSS based, multi-level dropdown menu component that can be used as a mobile-friendly hamburger site navigation on your web app.
How to use it:
1. Create nested HTML lists for the dropdown menu.
1 |
<ul class="nav"> |
2 |
<li><a href="#">Item 1</a></li> |
3 |
<li class="expand"><a href="#">Item 2<img src="next.svg"></a> |
4 |
<ul class="sub-menu"> |
5 |
<li><a href="#">Sub Item 2.1</a></li> |
6 |
</ul> |
7 |
</li> |
8 |
<li><a href="#">Item 3</a></li> |
9 |
</ul> |
2. Create a hamburger button to toggle the dropdown menu.
1 |
<button class="menu-btn"> |
2 |
<img src="menu.svg" /> |
3 |
</button> |
3. Style the dropdown menu & hamburger button.
01 |
/* button */ |
02 |
button { |
03 |
background: none; |
04 |
border: none; |
05 |
cursor: pointer; |
06 |
} |
07 |
08 |
button:active { |
09 |
border: none; |
10 |
} |
11 |
12 |
button img { |
13 |
max-width: 32px; |
14 |
} |
15 |
16 |
/* nav */ |
17 |
ul.nav { |
18 |
position: absolute; |
19 |
z-index: 99999; |
20 |
background: #eee; |
21 |
border: 1px solid black; |
22 |
padding: 15px; |
23 |
min-width: 100px; |
24 |
max-width: 140px; |
25 |
font-size: 18px; |
26 |
} |
27 |
28 |
ul.nav li img { |
29 |
width: 10px; |
30 |
padding: 0; |
31 |
margin: 0; |
32 |
} |
33 |
34 |
ul.nav li { |
35 |
list-style-type: none; |
36 |
} |
37 |
38 |
ul.nav a { |
39 |
text-decoration: none; |
40 |
} |
4. Load the latest jQuery JavaScript library in the HTML document.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
5. Enable the hamburger dropdown menu.
01 |
$(function (){ |
02 |
03 |
// hide main menu |
04 |
$('.nav').hide(); |
05 |
06 |
// select menu-button |
07 |
$('.menu-btn').click(function (){ |
08 |
$('.nav').toggle(300); // expands menu |
09 |
}); |
10 |
11 |
// hides sub-menu |
12 |
$('.sub-menu').hide(); |
13 |
14 |
// selects button to expand menu |
15 |
$('.nav li.expand').click(function(){ |
16 |
$('.sub-menu').toggle(300); // shows sub-menu |
17 |
}); |
18 |
|
19 |
}); |
