本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：
1. jquery插件版本代码如下：
[url=css/droplinebar.css]
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mydroplinemenu").droplinemenu();
});
</script>
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a>
<ul>
<li><a href="#">Water Sports 1</a></li>
<li><a href="#">Water Sports 1</a></li>
<li><a href="#">Water Sports 1</a></li>
<li><a href="#">Water Sports 1</a></li>
</ul>
</li>
<li><a href="#">Activities 4</a></li>
</ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
<ul>
<li><a href="#">Traveling 1</a></li>
<li><a href="#">Traveling 2</a></li>
<li><a href="#">Traveling 3</a></li>
<li><a href="#">Traveling 4</a>
<ul>
<li><a href="#">Africa 1</a></li>
<li><a href="#">Africa 2</a></li>
<li><a href="#">Africa 3</a></li>
<li><a href="#">Africa 4</a>
<ul>
<li><a href="#">Kenya 1</a></li>
<li><a href="#">Kenya 2</a></li>
<li><a href="#">Kenya 3</a></li>
<li><a href="#">Kenya 4</a></li>
<li><a href="#">Kenya 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Traveling 5</a></li>
</ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>
4. 无插件版本代码:
$(document).ready(function(){
var configs_over = 200,configs_out = 100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("<img class='downarrowclass' src='css/down.gif'>");
$('.dropmenu li.hasmenu').hover(function(){
if ($.browser.msie) {//清除ie下生成的overflow:hidden
$(this).parent("ul").css({'overflow': 'visible'});
}
$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},function(){
$(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});
希望本文所述对大家的jQuery程序设计有所帮助。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
