This time I will share jQuery Plugin and tutorial about Minimal Sliding Mobile Menu With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 2.59 KB |
|---|---|
| Views Total: | 7757 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery & CSS implementation of the mobile-friendly sliding off-canvas navigation menu that uses CSS3 animations for the smooth slide in effect. jQuery is used only to toggle the CSS classes as you open / close the menu.
How to use it:
1. Create the mobile menu with a hamburger toggle button on the webpage.
01 |
<header> |
02 |
<div class="mobile-nav-button"> |
03 |
<div class="mobile-nav-button__line"></div> |
04 |
<div class="mobile-nav-button__line"></div> |
05 |
<div class="mobile-nav-button__line"></div> |
06 |
</div> |
07 |
08 |
<nav class="mobile-menu"> |
09 |
<ul> |
10 |
<li><a>Home</a></li> |
11 |
<li><a>About</a></li> |
12 |
<li><a>Blog</a></li> |
13 |
<li><a>Contact</a></li> |
14 |
</ul> |
15 |
</nav> |
16 |
</header> |
2. The primary CSS/CSS3 styles for the mobile menu.
01 |
.mobile-menu { |
02 |
display: block; |
03 |
max-width: 500px; |
04 |
width: 100%; |
05 |
right: -100%; |
06 |
height: 100vh; |
07 |
background: #fcb852; |
08 |
position: absolute; |
09 |
z-index: 9998; |
10 |
transition: 0.6s ease; |
11 |
top: 0; |
12 |
opacity: 0; |
13 |
} |
14 |
15 |
.mobile-menu ul { |
16 |
position: relative; |
17 |
top: 50%; |
18 |
transform: translateY(-50%); |
19 |
padding: 0; |
20 |
} |
21 |
22 |
.mobile-menu ul li { list-style: none; } |
23 |
24 |
.mobile-menu ul li a { |
25 |
width: 100%; |
26 |
max-width: 1200px; |
27 |
margin: 0 auto; |
28 |
display: block; |
29 |
text-align: center; |
30 |
text-decoration: none; |
31 |
color: #0e0e0e; |
32 |
font-size: 3rem; |
33 |
font-weight: bold; |
34 |
overflow: hidden; |
35 |
position: relative; |
36 |
} |
37 |
38 |
.mobile-menu ul li a:after { |
39 |
content: ''; |
40 |
background: #0e0e0e; |
41 |
width: 100%; |
42 |
height: 100%; |
43 |
position: absolute; |
44 |
right: -100%; |
45 |
top: 0; |
46 |
z-index: -1; |
47 |
transition: 0.4s ease; |
48 |
} |
49 |
50 |
.mobile-menu ul li a:hover { color: #fff; } |
51 |
52 |
.mobile-menu ul li a:hover:after { right: 0; } |
53 |
54 |
.mobile-menu img { |
55 |
position: absolute; |
56 |
width: 150px; |
57 |
display: block; |
58 |
left: 50%; |
59 |
top: 3rem; |
60 |
transform: translatex(-50%); |
61 |
padding: 0; |
62 |
text-align: center; |
63 |
} |
64 |
65 |
.mobile-menu--open { |
66 |
right: 0; |
67 |
opacity: 1; |
68 |
} |
3. Style and animate the hamburger toggle button.
01 |
.mobile-nav-button { |
02 |
width: 35px; |
03 |
position: absolute; |
04 |
margin: 2rem; |
05 |
right: 0; |
06 |
top: 0; |
07 |
z-index: 9999; |
08 |
cursor: pointer; |
09 |
width: 35px; |
10 |
height: 30px; |
11 |
} |
12 |
13 |
.mobile-nav-button .mobile-nav-button__line { |
