jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：
1.jquery插件版本代码如下：
(function($){
$.fn.extend({
droplinemenu:function(configs){
varconfigs=$.extend({
over:200,
out:100,
rightdown:'css/down.gif'
},configs||{});
this.find(">ul").addClass("dropmenu");
this.find("ulli:has(ul)").addClass('hasmenu').find(">a").append("<imgclass='downarrowclass'src='"+configs.rightdown+"'>");
varcurrentobj;
return$('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);2.样式代码
*{margin:0;padding:0}
.droplinebar{
position:absolute;
z-index:20;
width:700px;
}
.droplinebarul.dropmenu{
position:relative;
}
.droplinebarul{
width:100%;
float:left;
font:bold13pxArial;
background:#242c54url(bluedefault.gif)centercenterrepeat-x;/*defaultbackgroundofmenubar*/
}
.droplinebarulli{
float:left;
}
.droplinebarulul{
width:700px;
display:none;
z-index:100;
position:absolute;
left:0;
background:#303c76;
zoom:1;
}
.droplinebarullia{
float:left;
color:white;
padding:9px11px;
text-decoration:none;
display:block;
}
.droplinebarulli.hasmenuaimg{border:none;margin-left:5px;}
.droplinebarullia:hover,.droplinebarulli.current{/*backgroundofmainmenubarlinksonMouseover*/
color:white;
background:transparenturl(blueactive.gif)centercenterrepeat-x;
}
/*Sublevelmenulinksstyle*/
.droplinebarulliullia{
font:normal13pxVerdana;
padding:6px;
padding-right:8px;
margin:0;
border-bottom:1pxsolidnavy;
}
.droplinebarulliullia:hover{/*submenulinks'backgroundcoloronMouseover*/
background:#242c54;
}3.HTML代码如下
<linkrel="stylesheet"type="text/css"href="css/droplinebar.css"/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scriptsrc="js/droplinemenu.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#mydroplinemenu").droplinemenu();
});
</script>
<divid="mydroplinemenu"class="droplinebar">
<ul>
<li><ahref="http://www.dynamicdrive.com/">Home</a></li>
<li><ahref="http://www.dynamicdrive.com/style/">CSSExamples</a>
<ul>
<li><ahref="#">Activities1</a></li>
<li><ahref="#">Activities2</a></li>
<li><ahref="#">Activities3</a>
<ul>
<li><ahref="#">WaterSports1</a></li>
<li><ahref="#">WaterSports1</a></li>
<li><ahref="#">WaterSports1</a></li>
<li><ahref="#">WaterSports1</a></li>
</ul>
</li>
<li><ahref="#">Activities4</a></li>
</ul>
</li>
<li><ahref="http://tools.dynamicdrive.com">Tools</a></li>
<li><ahref="http://www.javascriptkit.com/">JavaScript</a>
<ul>
<li><ahref="#">Traveling1</a></li>
<li><ahref="#">Traveling2</a></li>
<li><ahref="#">Traveling3</a></li>
<li><ahref="#">Traveling4</a>
<ul>
<li><ahref="#">Africa1</a></li>
<li><ahref="#">Africa2</a></li>
<li><ahref="#">Africa3</a></li>
<li><ahref="#">Africa4</a>
<ul>
<li><ahref="#">Kenya1</a></li>
<li><ahref="#">Kenya2</a></li>
<li><ahref="#">Kenya3</a></li>
<li><ahref="#">Kenya4</a></li>
<li><ahref="#">Kenya5</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">Traveling5</a></li>
</ul>
</li>
<li><ahref="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>4.无插件版本代码:
$(document).ready(function(){
varconfigs_over=200,configs_out=100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("<imgclass='downarrowclass'src='css/down.gif'>");
$('.dropmenuli.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程序设计有所帮助。