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.
| 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 300ms 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 300ms linear; |
025 |
} |
026 |
027 |
h1 { |
028 |
font-size: 2.9vw; |
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.5s, height 0.4s; |
049 |
-moz-transition: opacity 0.5s, height 0.4s; |
050 |
transition: opacity 0.5s, height 0.4s; |
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 300ms
|
