jquery黑色弹性下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery黑色弹性下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery黑色弹性下拉菜单</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
 	<!--[if lt IE 8]>
		<script src ="js/IE8.js"></script>
	<![endif]-->	
</head>
<body>

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a>
		<ul>
			<li><a href="#">About Us</a></li>
			<li><a href="#">About Them</a></li>
			<li><a href="#">About You</a>
				<ul>
					<li><a href="#">More About Us</a></li>
					<li><a href="#">More About Them</a></li>
					<li><a href="#">More About You</a></li>						
				</ul>
			</li>						
		</ul>
	</li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">International</a></li>
			<li><a href="#">Corporate</a>
				<ul>
					<li><a href="#">International</a></li>
					<li><a href="#">Corporate</a></li>
					<li><a href="#">American Offices</a></li>
				</ul>
			</li>
			<li><a href="#">American Offices</a></li>						
		</ul>
	</li>	
	<li><a href="#">Mission Statement</a></li>		
</ul>
     
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>	
<script src="js/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

JS代码(scripts.js):

var site = function(){
	this.navLi = $('#nav li').children('ul').hide().end();
	this.init();
}
;
	site.prototype ={
	init:function(){
	this.setMenu();
}
,// Enables the slidedown menu,and adds support for IE6setMenu:function(){
	$.each(this.navLi,function(){
	if ( $(this).children('ul')[0] ){
	$(this).append('<span />').children('span').addClass('hasChildren')}
}
);
	this.navLi.hover(function(){
	// mouseover$(this).find('> ul').stop(true,true).slideDown('slow','easeOutBounce');
}
,function(){
	// mouseout$(this).find('> ul').stop(true,true).hide();
}
);
}
}
new site();

CSS代码(style.css):

body{font-family:helvetica,arial,sans-serif;background:#e3e3e3;text-align:center;}
/* MENU */
#nav{background:#e5e5e5;float:left;margin:0;padding:0;border:1px solid white;border-bottom:none;}
#nav li a,#nav li{float:left;}
#nav li{list-style:none;position:relative;}
#nav li a{padding:1em 2em;text-decoration:none;color:white;background:#292929;background:-moz-linear-gradient(top,black,#3c3c3c 1px,#292929 25px);background:-webkit-gradient(linear,left top,left 25,from(black),color-stop(4%,#3c3c3c),to(#292929));border-right:1px solid #3c3c3c;border-left:1px solid #292929;border-bottom:1px solid #232323;border-top:1px solid #545454;}
#nav li a:hover{background:#2a0d65;background:-moz-linear-gradient(top,#11032e,#2a0d65);background:-webkit-gradient(linear,left top,left bottom,from(#11032e),to(#2a0d65));}
/* Submenu */
.hasChildren{position:absolute;width:5px;height:5px;background:black;right:0;bottom:0;}
#nav li ul{display:none;position:absolute;left:0;top:100%;padding:0;margin:0;}
#nav li:hover > ul{display:block;}
#nav li ul li,#nav li ul li a{float:none;}
#nav li ul li{_display:inline;/* for IE6 */
}
#nav li ul li a{width:150px;display:block;}
/* SUBSUB Menu */
#nav li ul li ul{display:none;}
#nav li ul li:hover ul{left:100%;top:0;}
#nav li ul

附件:下载该文件资源,减少时间成本(增值服务)