This time I will share jQuery Plugin and tutorial about Responsive Site Navigation with jQuery and Checkbox Hack, hope it will help you in programming stack.
| File Size: | 2.13 KB |
|---|---|
| Views Total: | 6781 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A fully responsive, mobile-friendly navigation menu built using HTML5, CSS3, the Checkbox Hack” tricks and a little jQuery magic. jQuery is used to detect the screen size and then add a smooth sliding animation to the responsive menu when toggled.
How to use it:
1. Create a site navigation from a nav list using checkbox + input label tricks.
01 |
<input type="checkbox" id="toggle"> |
02 |
<nav id="site-nav" class="site-nav"> |
03 |
<div class="container"> |
04 |
<label class="navBars" for="toggle"> |
05 |
<i class="fa fa-bars"></i> |
06 |
</label> |
07 |
<ul id="menu" class="menu"> |
08 |
<li><a href="#">Home</a></li> |
09 |
<li><a href="#">About</a></li> |
10 |
<li><a href="#">Blog</a></li> |
11 |
<li><a href="#">Contact</a></li> |
12 |
</ul> |
13 |
</div> |
14 |
</nav> |
2. Style the desktop site navigation in your CSS.
01 |
.container { |
02 |
max-width: 960px; |
03 |
margin: 0 auto; |
04 |
padding: 10px; |
05 |
} |
06 |
07 |
.site-nav { |
08 |
background: #efefef; |
09 |
color: #1a1b18; |
10 |
max-height: 70px; |
11 |
position: relative; |
12 |
} |
13 |
14 |
.site-nav a { text-decoration: none; } |
15 |
16 |
.site-nav .menu { |
17 |
background: #efefef; |
18 |
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); |
19 |
border-top: 1px solid #d9d9d9; |
20 |
display: none; |
21 |
list-style: none; |
22 |
margin: 0; |
23 |
padding: 0; |
24 |
text-align: center; |
25 |
position: absolute; |
26 |
top: 60px; |
27 |
right: 0; |
28 |
left: 0; |
29 |
} |
30 |
31 |
.site-nav .menu a { |
32 |
color: #292938; |
33 |
border-bottom: 1px solid #d9d9d9; |
34 |
font-weight: bold; |
35 |
display: block; |
36 |
padding: 15px; |
37 |
} |
38 |
39 |
.site-nav .menu a:hover { |
40 |
background: #292938; |
41 |
color: #efefef; |
42 |
} |
43 |
44 |
.site-nav .navBars { |
45 |
display: inline-block; |
46 |
font-size: 1.7em; |
47 |
line-height: 1.5em; |
48 |
float: right; |
49 |
-moz-user-select: none; |
50 |
-ms-user-select: none; |
51 |
user-select: none; |
52 |
-webkit-user-select: none; |
53 |
} |
54 |
55 |
#toggle { |
56 |
visibility: hidden; |
57 |
opacity: 0; |
58 |
position: absolute; |
59 |
top: -99999px; |
60 |
} |
61 |
62 |
#toggle:checked ~ nav .menu { display: block; } |
3. Style the mobile site navigation (screen size < 600px) in CSS media queries.
01 |
@media screen and (min-width: 600px) { |
02 |
03 |
.site-nav .navBars { display: none; } |
04 |
05 |
.site-nav .container { |
06 |
padding-top: 0; |
07 |
padding-bottom: 0; |
08 |
} |
09 |
10 |
.site-nav .logo { margin: 10px 0; } |
11 |
12 |
.site-nav .menu { |
13 |
display: block; |
14 |
box-shadow: none; |
15 |
border: none; |
16 |
float: right; |
17 |
position: static; |
18 |
} |
19 |
20 |
.site-nav .menu li { display: inline-block; } |
