This time I will share jQuery Plugin and tutorial about Sticky Morphing Side Navigation With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 2.78 KB |
|---|---|
| Views Total: | 2426 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a cool Material Design inspired page navigation that will morph into a fixed side menu when the users click on the toggle button. Built with HTML list, CSS3 trasnsitions/transforms/animations and a little JQuery script.
How to use it:
1. Create the side navigation menu together with its toggle button on the webpage.
01 |
<div class="menu-expanded"> |
02 |
<div id="menu" class="menu"></div> |
03 |
<span class="linee linea1"></span> |
04 |
<span class="linee linea2"></span> |
05 |
<span class="linee linea3"></span> |
06 |
<div class="main-menu"> |
07 |
<ul> |
08 |
<li><a href="#">Home</a></li> |
09 |
<li><a href="#">Categories</a></li> |
10 |
<li><a href="#">Works</a></li> |
11 |
<li><a href="#"><a href="https://www.jqueryscript.net/tags.php?/Portfolio/">Portfolio</a></a></li> |
12 |
<li><a href="#">Contact Us</a></li> |
13 |
<li><a href="#">About Us</a></li> |
14 |
</ul> |
15 |
</div> |
16 |
</div> |
2. The primary CSS styles for the side navigation.
01 |
.menu-expanded { |
02 |
background-color: transparent; |
03 |
position: fixed; |
04 |
width: 340px; |
05 |
height:100%; |
06 |
top: 0px; |
07 |
right: 0px; |
08 |
overflow: hidden !important; |
09 |
z-index: 5; |
10 |
} |
11 |
12 |
.menu { |
13 |
float: right; |
14 |
margin: 15px 15px 0 0; |
15 |
height: 49px; |
16 |
width: 49px; |
17 |
border-radius: 50%; |
18 |
background-color: #EE28<a href="https://www.jqueryscript.net/tags.php?/3D/">3D</a>; |
19 |
border: none; |
20 |
transition: all 0.40s ease-out; |
21 |
} |
22 |
23 |
.main-menu { |
24 |
visibility: hidden; |
25 |
position: absolute; |
26 |
right: 50px; |
27 |
top: 160px; |
28 |
opacity: 0; |
29 |
transition: all 0.300s; |
30 |
transition-delay: 0s; |
31 |
} |
32 |
33 |
.main-menu ul { |
34 |
list-style-type: none; |
35 |
} |
36 |
37 |
.main-menu ul li { |
38 |
margin: 20px 0px; |
39 |
} |
40 |
41 |
.main-menu ul li a { |
42 |
float: right; |
43 |
text-decoration: none; |
44 |
color: transparent; |
45 |
background-color: #DB0024; |
46 |
margin-top: 20px; |
47 |
} |
48 |
49 |
.main-menu ul li a:hover { |
50 |
opacity: 0.7; |
51 |
} |
3. The primary CSS styles for menu toggle button (hamburger toggle).
01 |
.menu, |
02 |
.linee { |
03 |
cursor: pointer; |
04 |
} |
05 |
06 |
.over { |
07 |
transform: scale(100); |
08 |
transition: all 0.350s ease-in; |
09 |
cursor: default; |
10 |
} |
11 |
12 |
.linea1 { |
13 |
background: #fff; |
14 |
height: 2px; |
15 |
width: 15px; |
16 |
position: absolute; |
17 |
right: 33px; |
18 |
top: 33px; |
19 |
transition: all 0.3s; |
20 |
} |
21 |
22 |
.linea2 { |
23 |
background: #fff; |
24 |
height: 2px; |
25 |
width: 15px; |
26 |
position: absolute; |
source : jqueryscript.net
