This time I will share jQuery Plugin and tutorial about Fullscreen Sliding Navigation Menu Plugin With jQuery – expandyMenu, hope it will help you in programming stack.
![Download Fullscreen Sliding Navigation Menu Plugin With jQuery - expandyMenu Fullscreen Sliding Navigation Menu Plugin With jQuery expandyMenu - Download Fullscreen Sliding Navigation Menu Plugin With jQuery - expandyMenu](https://www.jqueryscript.net/images/Fullscreen-Sliding-Navigation-Menu-Plugin-With-jQuery-expandyMenu.jpg)
File Size: | 21.9 KB |
---|---|
Views Total: | 2157 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
expandyMenu is a fancy jQuery navigation plugin used to create a fullscreen sliding menu that reveals the background on mouse hover.
How to use it:
1. Create the menu items as follows:
01 |
< div id = "menu" class = "menu-container" > |
02 |
|
03 |
< div id = "item-1" class = "menu-item red" > |
04 |
< h1 >Menu 1</ h1 > |
05 |
< p >Description here</ p > |
06 |
</ div > |
07 |
< div id = "item-2" class = "menu-item blue" > |
08 |
< h1 >Menu 2</ h1 > |
09 |
< p >Description here</ p > |
10 |
</ div > |
11 |
< div id = "item-2" class = "menu-item d-blue" > |
12 |
< h1 >Menu 3</ h1 > |
13 |
< p >Description here</ p > |
14 |
</ div > |
15 |
< div id = "item-3" class = "menu-item green" > |
16 |
< h1 >Menu 4</ h1 > |
17 |
< p >Description here</ p > |
18 |
</ div > |
19 |
< div id = "item-4" class = "menu-item yellow" > |
20 |
< h1 >Menu 5</ h1 > |
21 |
< p >Description here</ p > |
22 |
</ div > |
23 |
24 |
</ div > |
2. Create a toggle link for the navigation menu.
1 |
< a class = "cd-nav-trigger cd-text-replace" href = "#primary-nav" id = "toggle" > |
2 |
< span aria-hidden = "true" class = "cd-icon" ></ span > |
3 |
</ a > |
3. The primary CSS styles for the navigation menu.
001 |
#menu { overflow : hidden ; } |
002 |
003 |
#menu>* { |
004 |
display : block ; |
005 |
overflow : hidden ; |
006 |
} |
007 |
008 |
.menu-item { |
009 |
width : 25% ; |
010 |
height : 100% ; |
011 |
display : block ; |
012 |
position : absolute ; |
013 |
float : left ; |
014 |
-webkit-transform: translateY( -100% ); |
015 |
transform: translateY( -100% ); |
016 |
transition: transform 300 ms linear; |
017 |
will-change: transform; |
018 |
pointer-events: auto ; |
019 |
} |
020 |
021 |
.menu-item.active { |
022 |
-webkit-transform: translateY( 0% ); |
023 |
transform: translateY( 0% ); |
024 |
transition: transform 300 ms linear; |
025 |
} |
026 |
027 |
h 1 { |
028 |
font-size : 2.9 vw; |
029 |
color : #ffffff ; |
030 |
top : 15% ; |
031 |
width : 260px ; |
032 |
text-transform : uppercase ; |
033 |
text-align : center ; |
034 |
margin-left : -130px ; |
035 |
left : 50% ; |
036 |
z-index : 100 ; |
037 |
} |
038 |
039 |
.menu-item p { |
040 |
opacity: 0 ; |
041 |
text-align : center ; |
042 |
margin-left : -130px ; |
043 |
left : 50% ; |
044 |
z-index : 100 ; |
045 |
top : 30% ; |
046 |
width : 280px ; |
047 |
color : #ffffff ; |
048 |
-webkit-transition: opacity 0.5 s, height 0.4 s; |
049 |
-moz-transition: opacity 0.5 s, height 0.4 s; |
050 |
transition: opacity 0.5 s, height 0.4 s; |
051 |
} |
052 |
053 |
.menu-item.menu- expanded p { opacity: 1 ; } |
054 |
055 |
.menu-item>* { |
056 |
position : absolute ; |
057 |
will-change: transform; |
058 |
} |
059 |
@media screen and ( max-width : 768px ) { |
060 |
061 |
.menu-horizontal .menu-item { |
062 |
width : 100% ; |
063 |
float : none ; |
064 |
position : relative ; |
065 |
height : 250px ; |
066 |
-webkit-transform: translateX( -100% ); |
067 |
transform: translateX( -100% ); |
068 |
transition: transform 300 ms
|