jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單

更新時(shí)間：2017年01月04日 15:45:35 作者：小伍

這篇文章主要介紹了jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

以前看著京東，淘寶的導(dǎo)航做的真好，真想哪一天自己也能做出來(lái)這么漂亮功能全的導(dǎo)航菜單。今天弄了一下午終于自制成功，主要使用jQuery和CSS，實(shí)現(xiàn)功能基本和京東一樣。

功能介紹：
　　1、鼠標(biāo)停留導(dǎo)航；

　　2、根據(jù)子列表的高度，自動(dòng)調(diào)整對(duì)齊方式（頂端對(duì)齊/父類(lèi)目對(duì)齊）；

　　3、父子類(lèi)目樣式一致。

功能截圖：

源代碼：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta name="keywords" content=" keywords" />
 <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
 body{font-size:12px}
 ul,li{list-style-type:none;padding:0px}
 .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc;z-index:100;position:relative}
 .content{padding-top:10px;clear:left}
 a{text-decoration:none;color:#666;padding:10px}
 .optnFocus{background-color:#fff;font-weight:bold}
 div{padding:10px}
 div img{float:left;padding-right:6px}
 span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
 .tip{width:190px;position:absolute;padding:10px;display:none;}
 .tip li{line-height:23px}
 .focus{border:solid 1px red;background-color:#ccc}
 
</style>
<body>
<script type="text/javascript">
 $(function(){
 $('.optn').bind({mouseover:function(){
  var liTop = 12;
  var liLeft = $(this).offset().left+$(this).width();
  if(($(this).offset().top)>($(this).next('ul').height())){
  liTop = $(this).offset().top;
  }
  $(this).css('border-right','0');
  $(this).next('.tip').show().css({'left':liLeft+'px',top:liTop+'px'});
  $(this).addClass('focus');
  $(this).next('.tip').addClass('focus');
 },mouseout:function(){
  $(this).next('.tip').hide();
  $(this).removeClass('focus');
 }});
 });

</script>

<ul>
 <li class="menu">
 <div>
  <span>電腦數(shù)碼產(chǎn)品</span>
 </div>
 <ul class="content">
  <li class="optn"><a href="#">筆記本</a></li>
  <ul class="tip">
  <li><a href="#">筆記本1</a></li>
  <li><a href="#">筆記本1</a></li>
  <li><a href="#">筆記本1</a></li>
  <li><a href="#">筆記本1</a></li>
  <li><a href="#">筆記本1</a></li>
  </ul><li class="optn"><a href="#">移動(dòng)硬盤(pán)</a></li>
  <ul class="tip">
  <li><a href="#">移動(dòng)硬盤(pán)1</a></li>
  <li><a href="#">移動(dòng)硬盤(pán)1</a></li>
  <li><a href="#">移動(dòng)硬盤(pán)1</a></li>
  <li><a href="#">移動(dòng)硬盤(pán)1</a></li>
  <li><a href="#">移動(dòng)硬盤(pán)1</a></li>
  </ul><li class="optn"><a href="#">電腦軟件</a></li>
  <ul class="tip">
  <li><a href="#">電腦軟件1</a></li>
  <li><a href="#">電腦軟件1</a></li>
  <li><a href="#">電腦軟件1</a></li>
  <li><a href="#">電腦軟件1</a></li>
  <li><a href="#">電腦軟件1</a></li>
  </ul><li class="optn"><a href="#">數(shù)碼產(chǎn)品</a></li>
  <ul class="tip">
  <li><a href="#">數(shù)碼產(chǎn)品1</a></li>
  <li><a href="#">數(shù)碼產(chǎn)品1</a></li>
  <li><a href="#">數(shù)碼產(chǎn)品1</a></li>
  <li><a href="#">數(shù)碼產(chǎn)品1</a></li>
  <li><a href="#">數(shù)碼產(chǎn)品1</a></li>
  </ul>
 </ul>
 </li>
</ul>
<span></span>
</body>
</html>

遇到的問(wèn)題及解決辦法：

1、鼠標(biāo)指針位置獲取：

　　　　a、function(e){alert(e.pageX);　　alert(e.pageY);}//獲取鼠標(biāo)當(dāng)前位置

　　　　b、獲取元素的位置： $(this).offset().top　　$(this).offset().left//獲取元素的位置

　　　　注：以上兩種方法均在jQuery中適用，若使用JS中，需做適當(dāng)改動(dòng)

2、兩個(gè)區(qū)塊疊加時(shí)，邊框處理問(wèn)題：

　　需要的效果是：　　