当前位置:首 页 > 技术文章 > 转载 > 详细

jquery实现个人中心导航菜单效果和美观都非常不错

字号字号

摘要: 这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错 之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:源码下载 一起看下实……

  这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错

  之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:

源码下载

  一起看下实现的代码:

html代码:

01 <nav class="animated bounceInDown">
02 <ul>
03 <li><a href="#profile">
04 <div class="fa fa-user">
05 </div>
06 Profile </a></li>
07 <li><a href="#message">
08 <div class="fa fa-envelope">
09 </div>
10 Messages <span class="badge right">12</span> </a></li>
11 <li class="sub-menu"><a href="#settings">
12 <div class="fa fa-gear">
13 </div>
14 Settings
15 <div class="fa right fa-caret-up">
16 </div>
17 </a>
18 <ul style="display: block;">
19 <li><a href="#settings">Account </a></li>
20 <li><a href="#settings">Profile </a></li>
21 <li><a href="#settings">Secruity & Privacy </a></li>
22 <li><a href="#settings">Password </a></li>
23 <li><a href="#settings">Notification </a></li>
24 </ul>
25 </li>
26 <li class="sub-menu"><a href="#message">
27 <div class="fa fa-question-circle">
28 </div>
29 Help
30 <div class="fa right fa-caret-down">
31 </div>
32 </a>
33 <ul style="display: none;">
34 <li><a href="#settings">FAQ's </a></li>
35 <li><a href="#settings">Submit a Ticket </a></li>
36 <li><a href="#settings">Network Status </a></li>
37 </ul>
38 </li>
39 <li><a href="#message">
40 <div class="fa fa-sign-out">
41 </div>
42 Logout </a></li>
43 </ul>
44 </nav>

css代码:

01 body
02 {
03 background: #f7f7f7 url("1.jpg") no-repeat center center fixed;
04 -webkit-background-size: cover;
05 -moz-background-size: cover;
06 -o-background-size: cover;
07 background-size: cover;
08 font-family: "Roboto";
09 font-size: 14px;
10 -webkit-font-smoothing: antialiased;
11 -moz-osx-font-smoothing: grayscale;
12 }
13 body::before
14 {
15 content: '';
16 position: fixed;
17 z-index: -1;
18 top: 0;
19 left: 0;
20 background: #34495e; /* IE Fallback */
21 background: rgba(52, 73, 94, 0.8);
22 width: 100%;
23 height: 100%;
24 }
25 nav
26 {
27 position: absolute;
28 top: 50%;
29 left: 50%;
30 width: 360px;
31 margin: -78px 0 100px -180px;
32 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
33 -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
34 box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
35 }
36 nav ul
37 {
38 list-style: none;
39 margin: 0;
40 padding: 0;
41 }
42 nav ul li
43 {
44 /* Sub Menu */
45 }
46 nav ul li a
47 {
48 display: block;
49 background: #3498db;
50 padding: 10px 15px;
51 color: #fff;
52 text-decoration: none;
53 -webkit-transition: 0.2s linear;
54 -moz-transition: 0.2s linear;
55 -ms-transition: 0.2s linear;
56 -o-transition: 0.2s linear;
57 transition: 0.2s linear;
58 }
59 nav ul li a:hover
60 {
61 background: #2980b9;
62 }
63 nav ul li a .fa
64 {
65 width: 16px;
66 text-align: center;
67 margin-right: 5px;
68 }
69 nav ul li a .badge
70 {
71 display: inline-block;
72 background: #fff; /* IE Fallback */
73 background: rgba(255, 255, 255, 0.2);
74 padding: 3px 7px;
75 color: #fff;
76 font-size: 12px;
77 font-weight: 800;
78 }
79 nav ul li ul li a
80 {
81 background: #444;
82 border-left: 4px solid transparent;
83 padding: 10px 20px;
84 }
85 nav ul li ul li a:hover
86 {
87 background: #333;
88 border-left: 4px solid #3498db;
89 }
90 /* Float Right/Left */
91 .right
92 {
93 float: right;
94 }
95 .left
96 {
97 float: left;
98 }

js代码:

1 $('.sub-menu ul').hide();
2 $(".sub-menu").click(function () {
3 $(this).children("ul").slideToggle("100");
4 $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
5 }); //@ sourceURL=pen.js
  • 添加[Admin-3]
  • 浏览[2110]
  • ▼评论[0]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]