This time I will share jQuery Plugin and tutorial about Morphing Hamburger Navigation With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 5.92 KB |
|---|---|
| Views Total: | 2853 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An awesome hamburger navigation concept that morphs the hamburger toggle button into a fullscreen overlay using JavaScript (jQuery) and CSS animations.
How to use it:
1. Insert the hamburger toggle button into the header navigation.
01 |
<header class="cd-header"> |
02 |
<div class="header-wrapper"> |
03 |
<div class="logo-wrap"> |
04 |
<a href="#"><span>your</span>logo</a> |
05 |
</div> |
06 |
<div class="nav-but-wrap"> |
07 |
<div class="menu-icon hover-target"> |
08 |
<span class="menu-icon__line menu-icon__line-left"></span> |
09 |
<span class="menu-icon__line"></span> |
10 |
<span class="menu-icon__line menu-icon__line-right"></span> |
11 |
</div> |
12 |
</div> |
13 |
</div> |
14 |
</header> |
2. The CSS/CSS3 rules for the header navigation & hamburger toggle button.
01 |
.cd-header{ |
02 |
position: fixed; |
03 |
width:100%; |
04 |
top:0; |
05 |
left:0; |
06 |
z-index:100; |
07 |
} |
08 |
09 |
.header-wrapper{ |
10 |
position: relative; |
11 |
width: calc(100% - 100px); |
12 |
margin-left: 50px; |
13 |
} |
14 |
15 |
.logo-wrap { |
16 |
position: absolute; |
17 |
display:block; |
18 |
left:0; |
19 |
top: 40px; |
20 |
cursor: pointer; |
21 |
} |
22 |
23 |
.logo-wrap a { |
24 |
cursor: pointer; |
25 |
font-family: 'Montserrat', sans-serif; |
26 |
font-weight: 900; |
27 |
font-size: 20px; |
28 |
line-height: 20px; |
29 |
text-transform: uppercase; |
30 |
letter-spacing: 2px; |
31 |
color: #fff; |
32 |
transition : all 0.3s ease-out; |
33 |
} |
34 |
35 |
.logo-wrap a span{ |
36 |
color: #8167a9; |
37 |
} |
38 |
39 |
.logo-wrap a:hover { |
40 |
opacity: 0.9; |
41 |
} |
42 |
43 |
.nav-but-wrap{ |
44 |
position: relative; |
45 |
display: inline-block; |
46 |
float: right; |
47 |
padding-left: 15px; |
48 |
padding-top: 15px; |
49 |
margin-top: 26px; |
50 |
transition : all 0.3s ease-out; |
51 |
} |
52 |
53 |
.menu-icon { |
54 |
height: 30px; |
55 |
width: 30px; |
56 |
position: relative; |
57 |
z-index: 2; |
58 |
cursor: pointer; |
59 |
display: block; |
60 |
} |
61 |
62 |
.menu-icon__line { |
63 |
height: 2px; |
64 |
width: 30px; |
65 |
display: block; |
66 |
background-color: #fff; |
67 |
margin-bottom: 7px; |
68 |
cursor: pointer; |
69 |
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease; |
70 |
transition: background-color .5s ease, -webkit-transform .2s ease; |
71 |
transition: transform .2s ease, background-color .5s ease; |
72 |
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease; |
73 |
} |
74 |
75 |
.menu-icon__line-left { |
76 |
width: 16.5px; |
77 |
-webkit-transition: all 200ms linear; |
78 |
transition: all 200ms linear; |
79 |
} |
80 |
81 |
.menu-icon__line-right { |
82 |
width: 16.5px; |
83 |
float: right; |
84 |
-webkit-transition: all 200ms linear; |
85 |
-moz-transition: all 200ms linear; |
