hjlost

一个简单的网站导航效果:

 效果案例:查看演示

css:

 1 *{margin: 0;padding: 0;border: 0;}
 2 body{font-family: arial, 宋体, serif;font-size: 12px;}
 3 .menu{width:1170px;margin:0 auto;height:24px;}
 4 #nav{line-height: 24px;list-style-type: none;background: #666;}
 5 #nav a{display: block;width: 80px;text-align: center;}
 6 #nav a:link{color: #666;text-decoration: none;}
 7 #nav a:visited{color: #666;text-decoration: none;}
 8 #nav a:hover{color: #FFF;text-decoration: none;font-weight: bold;}
 9 #nav li{float: left;width: 80px;background: #CCC;}
10 #nav li.on{background: #999;}
11 #nav li a:hover{background: #999;}
12 /*清除浮动*/
13 .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
14 .clearfix{*zoom:1;}

body:

 1 <div class="menu">
 2     <ul id="nav" class="clearfix">
 3         <li>
 4             <a href="#">产品介绍</a>
 5         </li>
 6         <li>
 7             <a href="#">服务介绍</a>
 8         </li>
 9         <li>
10             <a href="#">成功案例</a>
11         </li>
12         <li>
13             <a href="#">关于我们</a>
14         </li>
15         <li>
16             <a href="#">在线演示</a>
17         </li>
18         <li>
19             <a href="#">联系我们</a>
20         </li>
21     </ul>
22 </div>

js:

1 $("#nav li").click(function () {
2     $(this).siblings().removeClass("on")
3     $(this).addClass("on");
4 }).eq(0).click();

 

分类:

技术点:

相关文章: