css网站导航-菜单
一个简单的网站导航效果:
效果案例：查看演示
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();
