仿淘宝顶部导航下拉菜单特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-09-24 20:14:52　-　阅:　-　评:0　-　积分:0

基本上所有的网站都有导航下拉，不同的网站，下拉也不同。今天就来分享下关于淘宝顶部导航下拉菜单特效的做法。如下图:

原理：效果就是当鼠标滑过时，下拉的内容显示出来，移开时内容隐藏掉。
在实现效果之前先将准备工作做好，那就是用css将静态效果呈现出来，源码如下：
html模块内容：

<!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=utf-8" />
<title>仿淘宝顶部导航下拉菜单特效--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="导航菜单,二级菜单,下拉菜单,菜单特效,jq菜单">
<meta name="description" content="导航菜单,二级菜单,下拉菜单,菜单特效,jq菜单">
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
.clearfix:before, .clearfix:after{clear: both;display:table;content:"";line-height:0; font-size:0;}
.clearfix{clear: both;}
body{font-size:12px;}
a{ text-decoration:none; color:#666; font-size:12px}
a:hover{ text-decoration:underline; color:#f60}
.top{height:28px; border-bottom:1px solid #dcdcdc; background:#f5f5f5;}
.top ul{width:300px; margin:0 auto;}
.top ul li{line-height:28px;position:relative; padding-right:1px; text-align:left; float:left;
background:url(bg_xian.gif) no-repeat right 8px; z-index:18}
.top ul li a{line-height:20px;display:inline-block; padding:0 23px 0 10px; position:relative; z-index:20;
border:1px solid transparent}
.top ul li a span,.top ul li a:hover span{width:0; height:0; line-height:0; border:1px solid #666;
border-width:4px;border-color:#666 transparent transparent transparent;
border-style:solid dashed dashed dashed;position:absolute; right:10px; top:7px}
.top ul li .hover{border:1px solid #bfbfbf;border-bottom:none;background:#fff;}
.top ul li a:hover span{border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed; top:4px;}
.top ul li div{border:1px solid #bfbfbf;background:#fff; position:absolute; top:23px; display:none; z-index:19;}
.top ul li div a{display:block; padding:0; text-indent:11px;}
.top ul li div a:hover{border:1px solid #fff;}
.top ul li .div1{width:69px}
.top ul li .div2{width:100px; left:-19px;}
.top ul li .div3{width:95px; left:-14px;}
</style>
<script type="text/javascript" src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/d/file/jquery/2013-09-24/dome_nav.js" ></script>
<div class="top">
<ul>
<li><a href="/" target="_blank">我要逛<span></span></a>
<div class="div1"><a href="#">逛上新</a>
<a href="/code">逛优惠</a>
<a href="/jquery/2013-09-24/80.html">用手机逛</a>
<a href="#">部品分类</a>
</div>
</li>
<li><a href="/jquery/2013-09-24/80.html" target="_blank">我的淘宝<span></span></a>
<div class="div2"><a href="#">已买到的宝贝</a>
<a href="/">店铺动态</a>
<a href="#">好友动态</a>
</div>
</li>
<li><a href="#" target="_blank">卖家中心<span></span></a>
<div class="div3"><a href="#">已卖出的宝贝</a>
<a href="#">出售中的宝贝</a>
<a href="#">专家服务市场</a>
<a href="#">专培训中心</a>
</div>
</li>
</ul>
</div>
</body>
</html>

接下来的事情就交给jq来办吧，当然用css3里面的属性也能实现，但这里面以jq为主。
jq代码：

在线演示<script type="text/javascript"  src="/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
  var $li=$(".top ul li");
  /*用一个变量代替指定的li*/
$li.hover(function(){;
  /*滑过时执行*/
$(this).children("a").addClass("hover");
  /*找到当前li里面的a后增加样式*/
$(this).children("div").css({"display":"block"});
  /*找到当前li里面的div后显示出来*/
},function(){
  /*滑出时执行*/
$(this).children("a").removeClass("hover");
  /*找到当前li里面的a后删除样式*/
$(this).children("div").css({"display":"none"});
  /*找到当前li里面的div后隐藏*/
});
})
</script>

点此下载→→【代码】仿淘宝顶部导航下拉菜单特效.zip　

读者用鼠标滑过上面的导航菜单栏时可以直观的看到效果。值得注意的是，部分读者在实际操作中会出现一个问题，就是移到同辈元素上时发生同时显示的结果，这一点是由于不同写法的原因以及层级关系所致,具体问题还要具体对待，这里不做说明。

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-09-24/80.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！