This time I will share jQuery Plugin and tutorial about Nested Drop Down Menu Plugin For jQuery – CeNav, hope it will help you in programming stack.
| File Size: | 4.22 KB |
|---|---|
| Views Total: | 2979 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
CeNav is a lightweight and simple-to-use jQuery plugin for create a nice-looking multi-level dropdown menu from nested HTML unordered lists.
How to use it:
1. Create nested html lists for the dropdown navigation.
01 |
<header> |
02 |
<nav> |
03 |
<ul class="top-level"> |
04 |
<li><a href="#">Home</a></li> |
05 |
<li><a href="#">Page</a></li> |
06 |
<li><a href="#">Categories <span></span></a> |
07 |
<ul class="sub-menu"> |
08 |
<li><a href="#">Item 1</a></li> |
09 |
<li><a href="#">Item 2 <span></span></a> |
10 |
<ul class="sub-menu"> |
11 |
<li><a href="#">Item 1.1</a></li> |
12 |
<li><a href="#">Item 1.2</a></li> |
13 |
</ul> |
14 |
</li> |
15 |
<li><a href="#">Item 3</a></li> |
16 |
<li><a href="#">Item 4</a></li> |
17 |
</ul> |
18 |
</li> |
19 |
<li><a href="#">Contact</a></li> |
20 |
<li><a href="#">About</a></li> |
21 |
<li><a href="#">Blog</a></li> |
22 |
</ul> |
23 |
</nav> |
24 |
</header> |
2. Style the nav menu in the CSS.
01 |
header { |
02 |
background: rgba(0, 0, 0, .5); |
03 |
height: 60px; |
04 |
padding: 15px; |
05 |
} |
06 |
07 |
ul { list-style-type: none; } |
08 |
09 |
li { position: relative; } |
10 |
11 |
ul.top-level > li { float: left; } |
12 |
13 |
ul.top-level > li a { |
14 |
padding: 0 10px; |
15 |
line-height: 30px; |
16 |
display: block; |
17 |
} |
18 |
19 |
a { |
20 |
display: block; |
21 |
text-decoration: none; |
22 |
color: rgba(0, 0, 0, .75); |
23 |
} |
24 |
25 |
span { |
26 |
float: right; |
27 |
margin-left: 5px; |
28 |
width: 30px; |
29 |
height: 30px; |
30 |
line-height: 30px; |
31 |
text-align: center; |
32 |
background: rgba(0, 0, 0, .1); |
33 |
transition: .2s linear transform; |
34 |
} |
35 |
36 |
span:before { |
37 |
content: "f107"; |
38 |
font-family: FontAwesome; |
39 |
font-size: 14px; |
40 |
} |
41 |
42 |
ul.sub-menu { |
43 |
position: absolute; |
44 |
top: 45px; |
45 |
left: 0; |
46 |
width: 200px; |
47 |
background: rgba(0, 0, 0, .5); |
48 |
padding: 5px; |
49 |
border-bottom: 5px solid rgba(0, 0, 0, .75); |
50 |
display: none; |
51 |
} |
52 |
53 |
ul.sub-menu li a { |
54 |
display: block; |
55 |
padding: 5px 10px; |
56 |
} |
57 |
58 |
ul.sub-menu li a span { transform: rotate(-90deg); } |
59 |
60 |
ul.sub-menu li a span.close { transform: rotate(90deg); } |
61 |
62 |
ul.sub-menu li ul.sub-menu { |
63 |
position: absolute<
|
