jquery 多级下拉菜单的实现代码,通过鼠标滑过或离开li元素时的显示或隐藏,实现多层下拉菜单效果,包括jquery下拉菜单的核心代码与css样式,是一篇不错的jquery实例教程。
jquery 多级下拉菜单
1、jquery核心代码(jquery下拉菜单):
复制代码 代码示例:
$(document).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show(); //鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").hide(); //鼠标离开隐藏li下面d的ul;
})
$("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css;
}) // by www.jb200.com
2、css代码部分:
复制代码 代码示例:
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{display:none;}
ul a{text-decoration:none;width:80px;height:20px;
line-height:20px;display:block;background:#bbb;font-size:12px}
ul li a:hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}
3、html部分,用ul包含下拉菜单中内容。
复制代码 代码示例:
<ul>
<li>
<a href="">栏目一</a>
<ul>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">栏目二</a>
</li>
<li>
<a href="">栏目三</a>
<ul>
<li><a href="">菜单三</a>
</li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<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>
</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>
<li>
<a href="">栏目四</a>
</li>
</ul>