之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图：
一起看下实现的代码：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<nav class="animated bounceInDown"><ul><li><a href="#profile"><div class="fa fa-user"></div>Profile </a></li><li><a href="#message"><div class="fa fa-envelope"></div>Messages <span class="badge right">12</span> </a></li><li class="sub-menu"><a href="#settings"><div class="fa fa-gear"></div>Settings<div class="fa right fa-caret-up"></div></a><ul style="display: block;"><li><a href="#settings">Account </a></li><li><a href="#settings">Profile </a></li><li><a href="#settings">Secruity & Privacy </a></li><li><a href="#settings">Password </a></li><li><a href="#settings">Notification </a></li></ul></li><li class="sub-menu"><a href="#message"><div class="fa fa-question-circle"></div>Help<div class="fa right fa-caret-down"></div></a><ul style="display: none;"><li><a href="#settings">FAQ's </a></li><li><a href="#settings">Submit a Ticket </a></li><li><a href="#settings">Network Status </a></li></ul></li><li><a href="#message"><div class="fa fa-sign-out"></div>Logout </a></li></ul></nav> |
css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
body{background: #f7f7f7 url("1.jpg") no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;font-family: "Roboto";font-size: 14px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}body::before{content: '';position: fixed;z-index: -1;top: 0;left: 0;background: #34495e; /* IE Fallback */background: rgba(52, 73, 94, 0.8);width: 100%;height: 100%;}nav{position: absolute;top: 50%;left: 50%;width: 360px;margin: -78px 0 100px -180px;-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}nav ul{list-style: none;margin: 0;padding: 0;}nav ul li{/* Sub Menu */}nav ul li a{display: block;background: #3498db;padding: 10px 15px;color: #fff;text-decoration: none;-webkit-transition: 0.2s linear;-moz-transition: 0.2s linear;-ms-transition: 0.2s linear;-o-transition: 0.2s linear;transition: 0.2s linear;}nav ul li a:hover{background: #2980b9;}nav ul li a .fa{width: 16px;text-align: center;margin-right: 5px;}nav ul li a .badge{display: inline-block;background: #fff; /* IE Fallback */background: rgba(255, 255, 255, 0.2);padding: 3px 7px;color: #fff;font-size: 12px;font-weight: 800;}nav ul li ul li a{background: #444;border-left: 4px solid transparent;padding: 10px 20px;}nav ul li ul li a:hover{background: #333;border-left: 4px solid #3498db;}/* Float Right/Left */.right{float: right;}.left{float: left;} |
js代码：
|
1
2
3
4
5
|
$('.sub-menu ul').hide();$(".sub-menu").click(function () {$(this).children("ul").slideToggle("100");$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");}); //@ sourceURL=pen.js |
