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

admin

发表文章数:3278

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()这个效果

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《jQuery实现渐变效果的下拉导航菜单》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

2 + 4 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册