css网站导航-菜单

时间：2023-03-08 21:23:23

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

效果案例：查看演示

css:

 *{margin:;padding:;border:;}

 body{font-family: arial, 宋体, serif;font-size: 12px;}

 .menu{width:1170px;margin:0 auto;height:24px;}

 #nav{line-height: 24px;list-style-type: none;background: #666;}

 #nav a{display: block;width: 80px;text-align: center;}

 #nav a:link{color: #666;text-decoration: none;}

 #nav a:visited{color: #666;text-decoration: none;}

 #nav a:hover{color: #FFF;text-decoration: none;font-weight: bold;}

 #nav li{float: left;width: 80px;background: #CCC;}

 #nav li.on{background: #999;}

 #nav li a:hover{background: #999;}

 /*清除浮动*/

 .clearfix:after{visibility:hidden;display:block;font-size:;content:" ";clear:both;height:;}

 .clearfix{*zoom:;}

body:

 <div class="menu">

     <ul id="nav" class="clearfix">

         <li>

             <a href="#">产品介绍</a>

         </li>

         <li>

             <a href="#">服务介绍</a>

         </li>

         <li>

             <a href="#">成功案例</a>

         </li>

         <li>

             <a href="#">关于我们</a>

         </li>

         <li>

             <a href="#">在线演示</a>

         </li>

         <li>

             <a href="#">联系我们</a>

         </li>

     </ul>

 </div>

js：

 $("#nav li").click(function () {

     $(this).siblings().removeClass("on")

     $(this).addClass("on");

 }).eq(0).click();

相关文章