二级导航下拉菜单

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-12 14:05:35　-　阅:　-　评:0　-　积分:0

上述代码是在昨天发表的那篇《纯css实现的二级导航下拉菜单》基础上，增加jq代码来实现完美兼容ie6，并且鼠标滑过时滑动动画展现出来，比之前的直接显示要让人舒服的多。而且此段jq中解决了多次瞬间滑过时会出现多个触发点同时执行动画的bug，但目前经多次测试后发现还有点小bug。上面的jq源码中有笔者的注释，读者如有不明白的地方可以，可使劲撮本站导航中的"资源下载"，里面有好多资源哦！jq手册必下︿v︿！或者点击本站右上角的qq图标，进群讨论哦。费话不多说了，放张效果图：

源码如下：

<!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特效">
<script type="text/javascript"  src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').hover(function(){
/*设置要进行动画的触点*/
$(this).children('span').stop().slideDown();
/*滑过时，找到当前的子节点'span'并切换成滑下效果*/
},function(){
$(this).children('span').stop().slideUp();
/*滑出时，找到当前的子节点'span'并切换成滑上效果*/
});
})
</script>
<style type="text/css">
*{margin:0; padding:0}
body{font-size:12px;}
a,a:hover{text-decoration:none;color:#000;}
ul{list-style:none;margin:0 auto;width:1000px; height:30px;background:#e0e0e0;}
ul li{float:left;height:30px;line-height:30px;position:relative;z-index:10;}
ul li a,ul li span,ul li span a{display:block;width:125px;text-align:center;}
ul li a{color:#000;}
ul li a:hover{background:#ccc;color:#fff;}
ul li span{display:none;position:absolute;top:30px; background:#ccc;}
ul li span a{ border-top:1px solid #666;color:#fff;}
ul li span a:hover{background:#e0e0e0;color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.yilingsj.com">艺灵首页</a></li>
<li><a href="http://www.yilingsj.com/flash/">flash动画</a><span><a href="http://www.yilingsj.com/flash/flashwz/">flash文字特效</a><a href="#">flash 焦点图</a><a href="#">flash 函数</a></span></li>
<li><a href="http://www.yilingsj.com/div/">div + css</a><span><a href="#">ie6 bug</a><a href="#">div 技巧</a></span></li>
<li><a href="http://www.yilingsj.com/css3/">css3特效</a><span><a href="#">css3常用属性</a><a href="#">transition集合</a><a href="#">实例欣赏</a></span></li>
<li><a href="http://www.yilingsj.com/jquery/2013-10-12/87.html">html5实例</a><span><a href="#">html5实例1</a><a href="#">html5实例2</a><a href="#">html5实例3</a></span></li>
<li><a href="http://www.yilingsj.com/jquery/">jquery特效</a><span><a href="#">banner特效</a><a href="#">导航特效</a><a href="#">实例展示</a></span></li>
<li><a href="http://www.yilingsj.com/jquery/">设计欣赏</a><span><a href="#">网页欣赏</a><a href="#">logo欣赏</a><a href="#">名片设计</a><a href="#">UI设计</a></span></li>
<li><a href="http://www.yilingsj.com/ziyuan/">资源下载</a><span><a href="#">手册资源</a><a href="#">jq库资源</a><a href="#">软件资源</a></span></li>
</ul>
</body>
</html>

点此下载→→【代码】带滑动效果的二级导航下拉菜单.zip　　　

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

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

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