网页导航

2010-10-28 杜世伟 JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/*导航样式开始*/  
#navigation {
 width:784px;
 padding:8px;
 margin:8px auto;
 background:#3B5998;
 height:18px;
}
#navigation ul li {
 float:left;
 margin-right:14px;
 position: relative ;
 z-index:100;
}
#navigation ul li a {
 display:block;   
 padding:0 8px;
 background:#EEEEEE;
 font-weight:700;
}
#navigation ul li a:hover {
 background:none;
 color:#fff;
}
#navigation ul li ul{
 background-color: #88C366;
 position: absolute;
 width: 80px;
 overflow:hidden;
 display:none;
}
#navigation ul li:hover ul{
 background-color: #88C366;
 position: absolute;
 width: 100px;
 display:block;
}
#navigation ul li ul li{
 border-bottom: 1px solid #BBB;
 text-align: left;
 width: 100%;
}
/*导航样式结束*/

#navigation {
 background:#AFD400;
}

</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
 $(function(){
     $("#navigation ul li:has(ul)").hover(function(){
              $(this).children("ul").stop(true,true).slideDown(400);
              },function(){
               $(this).children("ul").stop(true,true).slideUp("fast");
              });
     })
</script>
<title>无标题文档</title>
</head>

<body>
<div id="navigation">
 <ul>
   <li><a href="#">首 页</a></li>
   <li><a href="#">衬 衫</a>
    <ul>
      <li><a href="#">短袖衬衫</a></li>
      <li><a href="#">长袖衬衫</a></li>
      <li><a href="#">无袖衬衫</a></li>
    </ul>
  </li>
  <li><a href="#">卫 衣</a>
    <ul>
      <li><a href="#">开襟卫衣</a></li>
      <li><a href="#">套头卫衣</a></li>
    </ul>
   </li>
  <li><a href="#">裤 子</a>
    <ul>
      <li><a href="#">休闲裤</a></li>
      <li><a href="#">卡其裤</a></li>
      <li><a href="#">牛仔裤</a></li>
                     <li><a href="#">短裤</a></li>
                </ul>
         </li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>
</body>
</html>

标签: 导航，网页导航，jquery导航，jquery网页导航

« PHP中strlen和mb_strlen的区别 | uchome二次开发，填写一些额外的字段»
Powered by emlog 沪ICP备2023034538号-1