jquery无限层级下拉菜单实现代码
发布时间:2016-01-01 编辑:jiaochengji.com
本文介绍下jquery实现无限层级下拉菜单的方法,一个jquery级联下拉菜单的实例代码,有需要的朋友参考下。
1,html部分
复制代码 代码示例:
<ul id="daohang">
<li>
<a href="${base}/">首页</a>
<ul>
<li>
<a href="#">下拉一</a>
<ul class="aaa">
<li>
<a href="#">下拉二</a>
<ul class="aaa">
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉三</a></li>
</ul>
</li>
</ul>
<li>
<a href="${base}/">首页</a>
<ul>
<li>
<a href="#">下拉一</a>
<ul class="aaa">
<li>
<a href="#">下拉二</a>
<ul class="aaa">
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉三</a></li>
</ul>
</li>
</ul>
2,css代码部分
复制代码 代码示例:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
3.js(基于jquery)代码部分,级联下拉菜单效果。
复制代码 代码示例:
$(document).ready(function(){
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
});
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
});
您可能感兴趣的文章:
jQuery菜单插件 Smooth Navigational Menu
jquery无限层级下拉菜单实现代码
jQuery多层级树形菜单 NotesForMenu
javascript 无限级横向下拉导航菜单效果
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
jQuery水平下拉菜单 jMenu
jquery 多级下拉菜单的实现代码
jQuery ul标签下拉菜单演示代码
jquery下拉菜单 ul标签下拉菜单的例子
用jquery实现下拉菜单效果的代码
[关闭]