This time I will share jQuery Plugin and tutorial about Fullpage Expanding Menu with jQuery and CSS3, hope it will help you in programming stack.
| File Size: | 2.87 KB |
|---|---|
| Views Total: | 2625 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another fullscreen navigation concept that morphs a hamburger trigger into a full page navigation menu using jQuery, JavaScript and CSS / CSS3.
How to use it:
1. Create the Html for the full page navigation menu.
1 |
<div class="hamburger-trigger"><a href="https://www.jqueryscript.net/menu/">Menu</a></div> |
2. Create a hamburger trigger to toggle the menu.
01 |
<div class="menu"> |
02 |
<div class="menu__bg"></div> |
03 |
<nav class="menu__container"> |
04 |
<ul> |
05 |
<li><a href="#">Home</a></li> |
06 |
<li><a href="#">About</a></li> |
07 |
<li><a href="#">Contact</a></li> |
08 |
<li><a href="#">Blog</a></li> |
09 |
</ul> |
10 |
</nav> |
11 |
<div class="menu__close"></div> |
12 |
</div> |
3. Style the hamburger trigger.
01 |
.hamburger-trigger { |
02 |
position: absolute; |
03 |
top: 50%; |
04 |
left: 50%; |
05 |
text-transform: uppercase; |
06 |
font-weight: bold; |
07 |
text-align: center; |
08 |
font-size: 14px; |
09 |
color: #000; |
10 |
width: 42px; |
11 |
height: 42px; |
12 |
line-height: 42px; |
13 |
margin: -21px 0 0 -21px; |
14 |
cursor: pointer; |
15 |
} |
16 |
17 |
.hamburger-trigger:before, .hamburger-trigger:after { |
18 |
content: ''; |
19 |
width: 42px; |
20 |
height: 10px; |
21 |
background: #000; |
22 |
position: absolute; |
23 |
display: block; |
24 |
left: 0; |
25 |
} |
26 |
27 |
.hamburger-trigger:before { top: 0; } |
28 |
29 |
.hamburger-trigger:after { bottom: 0; } |
30 |
31 |
.hamburger-trigger--active { |
32 |
animation-name: burgertext; |
33 |
animation-duration: 4s; |
34 |
animation-iteration-count: 1; |
35 |
} |
36 |
37 |
.hamburger-trigger--active:before { |
38 |
animation-name: burgertop; |
39 |
animation-duration: 4s; |
40 |
animation-iteration-count: 1; |
41 |
} |
42 |
43 |
.hamburger-trigger--active:after { |
44 |
animation-name: burgerbottom; |
45 |
animation-duration: 4s; |
46 |
animation-iteration-count: 1; |
47 |
} |
4. Style the full page menu.
01 |
.menu { |
02 |
display: none; |
03 |
width: 100vw; |
04 |
height: 100vh; |
05 |
overflow: hidden; |
06 |
position: relative; |
07 |
} |
08 |
09 |
.menu__bg { |
10 |
position: absolute; |
11 |
opacity: 0; |
12 |
top: 50%; |
13 |
left: 50%; |
14 |
width: 32px; |
15 |
height: 32px; |
16 |
border-radius: 50%; |
17 |
transform: translate(-50%, -50%); |
18 |
background: #000; |
19 |
} |
20 |
21 |
.menu__bg--active { |
22 |
animation-name: menubg; |
23 |
animation-duration: 4s; |
24 |
animation-iteration-count: 1; |
25 |
animation-fill-mode: forwards; |
26 |
} |
27 |
28 |
.menu__container { |
29 |
position: absolute; |
30 |
opacity: 0; |
31 |
top: 50%; |
32 |
left: 50%; |
33 |
transform: translate(-50%, -50%); |
34 |
line-height: 1.5; |
35 |
text-align: center; |
36 |
font-size: 18px; |
37 |
text-transform: uppercase
source : jqueryscript.net
|
