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.
![Download Fullpage Expanding Menu with jQuery and CSS3 Fullpage Expanding Menu with jQuery CSS3 - Download Fullpage Expanding Menu with jQuery and CSS3](https://www.jqueryscript.net/images/Fullpage-Expanding-Menu-with-jQuery-CSS3.jpg)
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: 4 s; |
34 |
animation-iteration-count: 1 ; |
35 |
} |
36 |
37 |
.hamburger-trigger--active:before { |
38 |
animation-name: burgertop; |
39 |
animation-duration: 4 s; |
40 |
animation-iteration-count: 1 ; |
41 |
} |
42 |
43 |
.hamburger-trigger--active:after { |
44 |
animation-name: burgerbottom; |
45 |
animation-duration: 4 s; |
46 |
animation-iteration-count: 1 ; |
47 |
} |
4. Style the full page menu.
01 |
.menu { |
02 |
display : none ; |
03 |
width : 100 vw; |
04 |
height : 100 vh; |
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: 4 s; |
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
|