jquery实现无限分级横向导航菜单的方法
前端之家收集整理的这篇文章主要介绍了
jquery实现无限分级横向导航菜单的方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_404_0@本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：
@H_
404_0@1. jquery
插件版本
代码如下：
<div class="codetitle">
<a style="CURSOR: pointer" data="42048" class="copybut" id="copybut42048" onclick="doCopy('code42048')"> 代码如下: <div class="codebody" id="code42048">(function($){
$.fn.extend({
droplinemenu: function(configs) {
var configs = $.extend({
over: 200,
out: 100,
rightdown:'css/down.gif'
},configs||{});
this.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("
![]("+configs.rightdown+")
");
var currentobj;
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. 样式
代码
<div class="codetitle">
<a style="CURSOR: pointer" data="33762" class="copybut" id="copybut33762" onclick="doCopy('code33762')"> 代码如下: <div class="codebody" id="code33762">
{margin:0;padding:0}
.droplinebar{
position: absolute;
z-index: 20;
width: 700px;
}
.droplinebar ul.dropmenu {
position: relative;
}
.droplinebar ul{
width: 100%;
float: left;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /default background of menu bar
/
}
.droplinebar ul li{
float:left;
}
.droplinebar ul ul {
width: 700px;
display:none;
z-index: 100;
position:absolute;
left:0;
background: #303c76;
zoom: 1;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
display:block;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover,.droplinebar ul li .current{ /background of main menu bar links onMou
SEOver
/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}
/ Sub level menu links style
/
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /sub menu links' background color onMou
SEOver */
background: #242c54;
}
3.
HTML代码如下
<div class="codetitle">
<a style="CURSOR: pointer" data="11736" class="copybut" id="copybut11736" onclick="doCopy('code11736')"> 代码如下: <div class="codebody" id="code11736">@H_
301_12@
<script type="text/javascript" src="js/jquery.min.js">
<script src="js/droplinemenu.js" type="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$("#mydroplinemenu").droplinemenu();
});
4. 无插件版本代码:
");
$('.dropmenu li.hasmenu').hover(function(){
if ($.browser.msie) {//清除ie下
生成的overflow:hidden
$(this).parent("ul").css({'overflow': 'visible'});
}
$(this).find(">ul").stop(true,$(this).height()).slideDown(configs_over);
},true).slideUp(configs_out);
});
});
