以下是 水平垂直无限下拉jQuery导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平垂直无限下拉jQuery导航</title>
<link href="css/webwidget_vertical_menu.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_vertical_menu.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_vertical_menu").webwidget_vertical_menu({
menu_width: '160',
menu_height: '25',
menu_margin: '2',
menu_text_size: '12',
menu_text_color: '#CCC',
menu_background_color: '#666',
menu_border_size: '2',
menu_border_color: '#000',
menu_border_style: 'solid',
menu_background_hover_color: '#999',
directory: 'images'
});
});
</script>
<div id="webwidget_vertical_menu" class="webwidget_vertical_menu">
<ul>
<li><a href="#">MENU1</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link3">submenu3</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">MENU2</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link3">MENU3</a></li>
<li><a href="link4">MENU4</a></li>
<li><a href="link5">MENU5</a></li>
<li><a href="link6">MENU6</a></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
</html>
JS代码(webwidget_vertical_menu.js):
(function(a){
a.fn.webwidget_vertical_menu=function(p){
var p=p||{
}
;
var f=p&&p.menu_text_size?p.menu_text_size:"12";
var g=p&&p.menu_text_color?p.menu_text_color:"blue";
var h=p&&p.menu_border_size?p.menu_border_size:"1";
var i=p&&p.menu_background_color?p.menu_background_color:"#FFF";
var j=p&&p.menu_border_color?p.menu_border_color:"blue";
var k=p&&p.menu_border_style?p.menu_border_style:"solid";
var l=p&&p.menu_width?p.menu_width:"250";
var n=p&&p.menu_height?p.menu_height:"30";
var r=p&&p.menu_margin?p.menu_margin:"5";
var v=p&&p.menu_background_hover_color?p.menu_background_hover_color:"red";
var m=p&&p.directory?p.directory:"images";
var w=a(this);
f += 'px';
h += 'px';
l += 'px';
n += 'px';
r += 'px';
if(w.children("ul").length==0||w.find("li").length==0){
dom.append("Require menu content");
return null}
init();
function init(){
w.children("ul").find("a").css("color",g).css("font-size",f).css("line-height",n).css("display","block");
w.children("ul").children("li").css("border",h+" "+k+" "+j).css("margin-bottom",r).css("background-color",i);
w.find("li").children("ul").css("border",h+" "+k+" "+j).css("background-color",i);
w.find("li").css("width",l).css("height",n);
w.find("li:has(ul)").addClass("webwidget_vertical_menu_down_drop");
w.find("li:has(ul)").css("background-image","url("+m+"/down_drop_icon.gif)");
w.children("ul").children("li").find("ul").css("left",l).css("top","0px");
}
// s_sub_l(w.find("ul").children("li").children("ul").children("li").children("ul"),h);
w.find("li").hover(function(){
$(this).css("background-color",v);
$(this).children("ul").show()}
,function(){
$(this).css("background-color",i);
$(this).children("ul").hide()}
);
function s_u_t(a){
l_t_b_s=a.outerHeight(true)-a.css("border-top-width").replace("px","")*2+"px";
a.children("ul").css("top",l_t_b_s);
a.children("ul").css("left","-"+a.css("border-top-width"));
li_hieght = w.children("ul").children("li").outerHeight(true);
//li_width = w.children("ul").children("li").outerWidth(true);
a.children("ul").find("a").css("line-height",li_hieght+"px");
//a.children("ul").find("li").width(li_width);
}
function s_sub_l(a,b){
boder_width=b.replace("px","");
a.css("left",a.parent("li").parent("ul").outerWidth(true)-boder_width*2);
a.css("top","-"+b)}
}
}
)(jQuery);
CSS代码(webwidget_vertical_menu.css):
.webwidget_vertical_menu ul{padding:0px;margin:0px;font-family:Arial;}
.webwidget_vertical_menu li{}
.webwidget_vertical_menu ul li{list-style:none;position:relative;}
.webwidget_vertical_menu ul li a{padding-left:15px;text-decoration:none;}
.webwidget_vertical_menu ul li ul{display:none;position:absolute;background-color:#fff;z-index:999999;}
.webwidget_vertical_menu ul li ul li{margin:0px;border:none;}
.webwidget_vertical_menu ul li ul li ul{}
.webwidget_vertical_menu_down_drop{background-position:right center;background-repeat:no-repeat !important;}
.webwidget_vertical_menu ul li li{font-weight:normal;}
分享到QQ
分享到微博
微信扫一扫
