This time I will share jQuery Plugin and tutorial about Fullscreen Hamburger Toggle Menu With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 6.56 KB |
|---|---|
| Views Total: | 5037 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A cross-platform side navigation written in jQuery and CSS/CSS3 that allows to show a fullscreen overlay menu with an animated hamburger toggle icon.
How to use it:
1. The html for the hamburger toggle icon.
1 |
<div id="nav-icon"> |
2 |
3 |
<span></span> |
4 |
<span></span> |
5 |
<span></span> |
6 |
7 |
</div> |
2. Style & animate the toggle icon.
01 |
#nav-icon { |
02 |
position: relative; |
03 |
margin: 0 auto; |
04 |
width: 45px; |
05 |
height: 40px; |
06 |
z-index: 10; |
07 |
/* Bring icon ontop of overlay */ |
08 |
cursor: pointer; |
09 |
-webkit-transform: rotate(0deg); |
10 |
transform: rotate(0deg); |
11 |
-webkit-transition: .5s ease-in-out; |
12 |
transition: .5s ease-in-out; |
13 |
} |
14 |
15 |
#nav-icon span { |
16 |
position: absolute; |
17 |
display: block; |
18 |
width: 100%; |
19 |
height: 4px; |
20 |
background: teal; |
21 |
border-radius: 9px; |
22 |
opacity: 1; |
23 |
left: 0; |
24 |
-webkit-transform: rotate(0deg); |
25 |
transform: rotate(0deg); |
26 |
-webkit-transition: .25s ease-in-out; |
27 |
transition: .25s ease-in-out; |
28 |
} |
29 |
30 |
#nav-icon span:nth-child(1) { |
31 |
top: 0px; |
32 |
} |
33 |
34 |
#nav-icon span:nth-child(2) { |
35 |
top: 18px; |
36 |
} |
37 |
38 |
#nav-icon span:nth-child(3) { |
39 |
top: 36px; |
40 |
} |
41 |
42 |
#nav-icon.animate-icon span:nth-child(1) { |
43 |
top: 18px; |
44 |
-webkit-transform: rotate(135deg); |
45 |
transform: rotate(135deg); |
46 |
} |
47 |
48 |
#nav-icon.animate-icon span:nth-child(2) { |
49 |
opacity: 0; |
50 |
left: -60px; |
51 |
} |
52 |
53 |
#nav-icon.animate-icon span:nth-child(3) { |
54 |
top: 18px; |
55 |
-webkit-transform: rotate(-135deg); |
56 |
transform: rotate(-135deg); |
57 |
} |
3. Create the fullscreen overlay menu:
01 |
<div id="overlay"> |
02 |
03 |
<div> |
04 |
05 |
<ul> |
06 |
<li><a href="#">Home</a></li> |
07 |
<li><a href="#">Abou</a></li> |
08 |
<li><a href="#">Contact</a></li> |
09 |
</ul> |
10 |
11 |
</div> |
12 |
13 |
</div> |
4. The primary CSS/CSS3 styles for the fullscreen overlay menu.
01 |
#overlay { |
02 |
display: -webkit-box; |
03 |
display: -ms-flexbox; |
04 |
display: flex; |
05 |
/* Overlay positioning */ |
06 |
display: none; |
07 |
position: absolute; |
08 |
left: 0; |
09 |
top: 0; |
10 |
width: 100%; |
11 |
/* Want a left- or right sided navigation instead? Just play around with the width! */ |
12 |
height: 100%; |
13 |
background: rgba(0, 0, 0, 0.7); |
14 |
} |
15 |
16 |
#overlay div { |
17 |
display: -webkit-box; |
18 |
display: -ms-flexbox; |
19 |
display: flex; |
20 |
width: 100%; |
21 |
height: 100vh; |
22 |
-webkit-box-pack: center; |
23 |
-ms-flex-pack: center; |
24 |
justify-content: center; |
