jQuery实现渐变效果的下拉导航菜单

Web前端开发 / 4943 次阅读

HTML代码： 

<div id="nav">
	<ul>
		<li>
			<a href="http://neirong.org" target="_blank">资源共享</a>
			<ul>
				<li><a href="http://neirong.org" target="_blank">资源共享</a></li>
				<li><a href="http://neirong.org" target="_blank">资源共享</a></li>
				<li><a href="http://neirong.org" target="_blank">资源共享</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS代码： 

#nav li {
	float:left; 
	line-height:2em; 
	margin:5px 0 5px 5px;
}
#nav li ul {
	position:absolute; 
	display:none; 
	z-index:9999; 
	width:150px; 
	left:-999em;
	margin:0;
	background:#C00;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:0 0 15px #F63;
	-moz-box-shadow:0 0 15px #F63;
	-webkit-box-shadow:0 0 15px #F63;
}

jQuery代码： 

<script type="text/javascript">
$(function(){
	$("#nav li").hover(function(){
		if(!$(this).children("#nav li ul").is(":animated")){
			$(this).children("#nav li ul").fadeIn("100");
		}
	},function(){
		$(this).children("#nav li ul").fadeOut("400");
	});
})
</script>

fadeIn()和fadeOut()这个效果