侧导航三级下拉菜单(滑动效果，点击触发)

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-16 16:28:44　-　阅:　-　评:0　-　积分:0

续上文《侧导航二级下拉菜单(滑动效果，点击触发)》，三级下拉菜单虽然不是很常见，但有些奇葩的读者也是需要的，在此，笔者已将代码做了修改，增加了三级下拉菜单。已在win7环境下ie6中测试完毕，完美兼容。废话就不多说了，放张效果图：

源码如下：

<!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="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
　$(function(){
　　$('ul li span').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
　　$('ul li span').bind('click',function(){
　　    $(this).siblings('div').slideToggle().parent().siblings().children('div').slideUp();
　　});
　　$('div span').bind('click',function(){
　　    $(this).siblings('p').slideToggle().parent().siblings().children('p').slideUp();
　　})
　})
</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:125px;background:#e0e0e0;}
ul li{border-bottom:1px solid #999;height:auto}
ul li span,ul li div a{display:block;width:125px;text-align:center;}
ul li span{color:#000;height:30px;line-height:30px; cursor:pointer}
ul li .hover{background:#ccc;color:#fff;}
ul li div{width:125px;display:none;}
ul li div span{background:rgb(176,176,176);}
ul li div p{display:none;}
ul li div a{color:#fff;background:#999;height:30px;line-height:30px;border-top:1px solid #666;}
ul li div a:hover{background:#ccc;color:#000;}
</style>
</head>
<body>
<ul>
<li>
<span>艺灵首页</span>
</li>
<li><span>flash动画</span>
<div><span>flash动画2</span>
<p><a href="/flash/">透明flash</a></p>
<p><a href="/flash/">flash 焦点图</a></p>
<p><a href="/flash/">flash 函数</a></p>
</div>
</li>
<li><span>div + css</span>
<div><span>div + css 2</span>
<p><a href="/div/">ie6 bug</a></p>
<p><a href="/div/">div 技巧</a></p>
</div>
</li>
<li><span>css3特效</span>
<div><span>css3特效 2</span>
<p><a href="/css3/">css3常用属性</a></p>
<p><a href="/css3/">transition集合</a></p>
<p><a href="/css3/">实例欣赏</a></p>
</div>
</li>
<li><span>html5实例</span>
<div><span>html5实例 2</span>
<p><a href="/code">html5实例1</a></p>
<p><a href="/code">html5实例2</a></p>
<p><a href="/code">html5实例3</a></p>
</div>
</li>
<li><span>jquery特效</span>
<div><span>jquery特效 2</span>
<p><a href="/jquery/">banner特效</a></p>
<p><a href="/jquery/">导航特效</a></p>
<p><a href="/jquery/">实例展示</a></p>
</div>
</li>
<li><span>设计欣赏</span>
<div><span>设计欣赏 2</span>
<p><a href="/code/">网页欣赏</a></p>
<p><a href="/code/">logo欣赏</a></p>
<p><a href="/code/">名片设计</a></p>
<p><a href="/code/">UI设计</a></p>
</div>
</li>
<li><span>资源下载</span>
<div><span>资源下载 2</span>
<p><a href="/ziyuan/">手册资源</a></p>
<p><a href="/ziyuan/">jq库资源</a></p>
<p><a href="/ziyuan/">软件资源</a></p>
</div>
</li>
</ul>
</body>
</html>

点此下载→→【代码】侧导航三级下拉菜单(滑动效果，点击触发).zip　　

怎么样，三级下拉菜单足够你使用。如果笔者的三级下拉菜单还是不能满足你的话，建议你自己动手，根据自己的需求来进行增删。

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

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

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