This time I will share jQuery Plugin and tutorial about Sliding Hamburger Navbar With jQuery And CSS, hope it will help you in programming stack.
| File Size: | 1.79 KB |
|---|---|
| Views Total: | 212 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An animated hamburger navigation for the web.
This project makes use of jQuery and CSS/CSS3 to create an animated hamburger toggle that slides out a horizontal navbar when getting clicked.
How to use it:
1. Add the hamburger toggle and your menu list to the navbar.
01 |
<div class="menu"> |
02 |
<span class="toggle"> |
03 |
<i></i> |
04 |
<i></i> |
05 |
<i></i> |
06 |
</span> |
07 |
<div class="menuContent"> |
08 |
<ul> |
09 |
<li>Home</li> |
10 |
<li>About</li> |
11 |
<li>Contact</li> |
12 |
<li>Blog</li> |
13 |
<li>About us</li> |
14 |
</ul> |
15 |
</div> |
16 |
</div> |
2. The core CSS styles for the navbar.
01 |
.menu { |
02 |
height: 70px; |
03 |
width: 70px; |
04 |
right: 70px; |
05 |
top: 20px; |
06 |
text-align: center; |
07 |
position: absolute; |
08 |
background: #fafafa; |
09 |
overflow: hidden; |
10 |
transition: all 0.2s ease; |
11 |
z-index: 999; |
12 |
} |
13 |
14 |
.menu.active { |
15 |
width: calc(100% - 140px); |
16 |
} |
17 |
18 |
.menu.active .menuContent * { |
19 |
opacity: 1; |
20 |
} |
21 |
22 |
.menu .menuContent { |
23 |
position: absolute; |
24 |
width: 100%; |
25 |
height: 100%; |
26 |
line-height: 40px; |
27 |
right: 0px; |
28 |
text-align: center; |
29 |
} |
30 |
31 |
.menu .menuContent * { |
32 |
opacity: 0; |
33 |
} |
34 |
35 |
.menu .menuContent ul li { |
36 |
display: inline-block; |
37 |
margin-left: 50px; |
38 |
margin-right: 50px; |
39 |
color: #2d3235; |
40 |
transition: opacity 0.3s ease 0.3s; |
41 |
cursor: pointer; |
42 |
position: relative; |
43 |
} |
44 |
45 |
.menu .menuContent ul li:hover:before { |
46 |
opacity: 0.8; |
47 |
top: 13px; |
48 |
left: 20px; |
49 |
} |
50 |
51 |
.menu .menuContent ul li:hover:after { |
52 |
opacity: 0.8; |
53 |
bottom: 13px; |
54 |
left: -20px; |
55 |
} |
56 |
57 |
.menu .menuContent ul li:before, .menu .menuContent ul li:after { |
58 |
content: ""; |
59 |
position: absolute; |
60 |
width: 20px; |
61 |
height: 2px; |
62 |
background: #ccc; |
63 |
transition: all 0.3s ease; |
64 |
} |
65 |
66 |
.menu .menuContent ul li:before { |
67 |
transform: rotate(-55deg); |
68 |
left: 60px; |
69 |
top: -30px; |
70 |
opacity: 0; |
71 |
right: 0; |
72 |
margin: auto; |
73 |
} |
74 |
75 |
.menu .menuContent ul li:after { |
76 |
transform: rotate(-55deg); |
77 |
left: -60px; |
78 |
bottom: -30px; |
79 |
opacity: 0; |
80 |
right: 0; |
81 |
margin: auto; |
82 |
} |
3. Style the hamburger menu toggle.
01 |
.menu.active span i:nth-child(1) { |
02 |
transform: rotate(-45deg) translate(-50%, -50%); |
03 |
top: 50%; |
04 |
} |
05 |
06 |
.menu.active span i:nth-child(2) { |
07 |
transform: translateX(-100px); |
