This time I will share jQuery Plugin and tutorial about Responsive Hamburger Dropdown Menu With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 9.45 KB |
|---|---|
| Views Total: | 2862 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A responsive, mobile-compatible navigation system that transforms the regular horizontal header navigation into a dropdown menu triggered by a hamburger toggle button.
Written in JavaScript (jQuery) and CSS flexbox, transition, transform, media query properties.
How to use it:
1. Create a header navigation for your webpage.
01 |
<header> |
02 |
<section id="nav"> |
03 |
<div class="wrapper"> |
04 |
<nav class="site-nav"> |
05 |
<h1 class="logo">Site Logo</h1> |
06 |
<div class="menu-toggle"> |
07 |
<div class="hamburger"></div> |
08 |
</div> |
09 |
<ul class="open desktop"> |
10 |
<li><a href="#!" id="one">Home</a></li> |
11 |
<li><a href="#!">Latest News</a></li> |
12 |
<li><a href="#!">About us</a></li> |
13 |
<li><a href="#!">Download</a></li> |
14 |
<li><a href="#!">Contact us</a></li> |
15 |
</ul> |
16 |
</nav> |
17 |
</div> |
18 |
</section> |
19 |
</header> |
2. The basic styles for the hamburger dropdown menu.
01 |
#nav { |
02 |
width: 100%; |
03 |
margin: 0 auto; |
04 |
background: #f04343; |
05 |
} |
06 |
07 |
.wrapper { |
08 |
width: 100%; |
09 |
max-width: 960px; |
10 |
margin: 0 auto; |
11 |
} |
12 |
13 |
nav { |
14 |
margin: 0; |
15 |
padding: 0; |
16 |
} |
17 |
18 |
nav ul { |
19 |
display: flex; |
20 |
flex-direction: column; |
21 |
list-style-type: none; |
22 |
padding: 0; |
23 |
margin: 0; |
24 |
display: none; |
25 |
} |
26 |
27 |
nav ul.opening { |
28 |
display: block; |
29 |
height: 30px; |
30 |
} |
31 |
32 |
nav li { |
33 |
border-bottom: 1px solid #f6f4e2; |
34 |
} |
35 |
36 |
nav li:last-child { |
37 |
border-bottom: none; |
38 |
} |
39 |
40 |
nav a { |
41 |
color: #EBEBD3; |
42 |
background: #333; |
43 |
display: block; |
44 |
padding: 1.5em 4em 1.5em 1em; |
45 |
text-transform: uppercase; |
46 |
text-decoration: none; |
47 |
} |
48 |
49 |
nav a:hover, |
50 |
nav a:focus { |
51 |
background: #111; |
52 |
} |
3. Style the hamburger menu toggler.
01 |
.menu-toggle { |
02 |
position: absolute; |
03 |
padding: 0.8em; |
04 |
top: 1em; |
05 |
right: .5em; |
06 |
cursor: pointer; |
07 |
} |
08 |
09 |
.hamburger, |
10 |
.hamburger::before, |
11 |
.hamburger::after { |
12 |
content: ''; |
13 |
display: block; |
14 |
background: #EBEBD3; |
15 |
height: 3px; |
16 |
width: 2em; |
17 |
border-radius: 3px; |
18 |
-webkit-transition: all ease-in-out 350ms; |
19 |
transition: all ease-in-out 350ms; |
20 |
} |
21 |
22 |
.hamburger::before { |
23 |
-webkit-transform: translateY(-7px); |
24 |
transform: translateY(-7px); |
25 |
} |
26 |
27 |
.hamburger::after { |
28 |
-webkit-transform: translateY(4px); |
