JQUERY+CSS3实现通用网站二级菜单下拉效果，真正隐藏DIV并实现动画。

最新推荐文章于 2021-12-24 18:49:22 发布

神夜大侠

最新推荐文章于 2021-12-24 18:49:22 发布

阅读量254

点赞数 1

分类专栏： JQUERY + JS + CSS

本文链接：https://blog.csdn.net/u012015434/article/details/115404923

版权

CSS3 JQUERY 下拉菜单动画效果导航栏

关键词由CSDN通过智能技术生成

JQUERY + JS + CSS 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、通常使用CSS3即可实现，但是做不到真正隐藏DIV，导致一些BUG，下面使用JQUERY+CSS3的方式真正实现多种下拉效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
	
	  <style>
			 *{ margin:0px; padding:0px; box-sizing: border-box;}
			ul,li{ list-style-type: none;}
			body{ width:1200px; margin:0 auto;}
			/***导航***/
			.header{ height:60px; background:#32AAFE;  position: relative; z-index:22;}
			.header ul { display: flex; justify-content: space-between; }
			.header ul > li { flex:1; position: relative; height:60px; }
			.header ul > li > a { text-decoration: none; text-align: center; display: block; color:#fff; height:60px; line-height:60px; font-size: 16px;}
			.header ul > li:hover > a{ background:#1f92e2;}
			.header ul > li > a.on{background:#1f92e2;}
			
			.navson{ width:100%; display:none; position:absolute; top:60px; padding-top:12px; z-index:22; left:0;}
			.navson ul{ height:auto;  position: relative; display: block; background:#fff; box-shadow:#555 0 0 10px; }
			.navson ul:after{ width:0px; height:0px; border-bottom:12px solid #fff; border-left:12px solid transparent; border-right:12px solid transparent; position: absolute; left:0; right:0; margin:auto; top:-12px; content:'';}
			.navson ul li{ margin:0; height:auto;}
			.navson ul li a{ transition: none; font-size:14px; text-align: center; border-bottom:1px dotted #ddd; transition: background-color 0.3s ease; height:40px; display: block; line-height:40px; color:#555; padding:0 10px;}
			.navson ul li a:last-child{ border-bottom:0;}
			.navson ul li a:hover,.navson ul li a.on{ background: #1f92e2; color:#fff;}
			
			/***动画部份样式 ***/
			.syui-anim{-webkit-animation-duration: .35s; animation-duration: .35s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
			/**向上显示移除向下隐藏,类似可以写很多种效果**/			
			/**进入**/
			.syui-up-enter {-webkit-animation-name:syui-up; animation-name: syui-up;}	
			@-webkit-keyframes syui-up { from {	-webkit-transform:translate3d(0, 50px, 0);	opacity:0} to { -webkit-transform: translate3d(0, 0, 0); opacity: 1 }  }
			
			.syui-scale-enter {-webkit-animation-name:syui-scale; animation-name: syui-scale;}
			@-webkit-keyframes syui-scale { from {	-webkit-transform:translate3d(0, 50px, 0) scale(1.3);	opacity:0} to { -webkit-transform: translate3d(0, 0, 0) scale(1); opacity: 1 }  }			
			
			.syui-scale2-enter {-webkit-animation-name:syui-scale2; animation-name: syui-scale2;}
			@-webkit-keyframes syui-scale2 { from {	-webkit-transform:translate3d(0, 50px, 0) scale(0.6);	opacity:0} to { -webkit-transform: translate3d(0, 0, 0) scale(1); opacity: 1 }  }
			
			.syui-down-enter {-webkit-animation-name:syui-down; animation-name: syui-down;}
			@-webkit-keyframes syui-down { from {	-webkit-transform:translate3d(0, -50px, 0);	opacity:0} to { -webkit-transform: translate3d(0, 0, 0); opacity: 1 }  }
			
			
			/***离开**/
			.syui-leave {-webkit-animation-name:syui-down; animation-name: syui-leave;}
			@-webkit-keyframes syui-leave { from {	-webkit-transform:translate3d(0, 0px, 0);	opacity:1}	to { -webkit-transform: translate3d(0, 50px, 0); opacity:0} }			
			
			
		</style>
		
		<div class="header">
			<ul class="nav" id="nav">
				<li><a href="">首页</a></li>
				<li><a href="">关于我们</a>
				<div class="navson syui-anim" enter="syui-up-enter">
					<ul>
						<li><a href="">公司简介</a></li>
						<li><a href="">企业文化</a></li>
						<li><a href="">荣誉资质</a></li>
						<li><a href="">公司风采</a></li>
					</ul>
				</div>
				</li>
				<li><a href="">新闻资讯</a>
				<div class="navson syui-anim"  enter="syui-scale-enter">
					<ul>
					<li><a href="">公司新闻</a></li>
					<li><a href="">行业新闻</a></li>
					<li><a href="">技术文章</a></li>
					</ul>
				</div>
				</li>
				<li><a href="">产品中心</a>
					<div class="navson syui-anim"  enter="syui-scale2-enter">
						<ul>
						<li><a href="">产品分类一</a></li>
						<li><a href="">产品分类二</a></li>
						<li><a href="">产品分类三</a></li>
						<li><a href="">产品分类四</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">客户案例</a>
					<div class="navson syui-anim"  enter="syui-down-enter">
						<ul>
						<li><a href="">案例分类一</a></li>
						<li><a href="">案例分类二</a></li>
						<li><a href="">案例分类三</a></li>
						<li><a href="">案例分类四</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">在线留言</a></li>
				<li><a href="">联系我们</a></li>
			</ul>
		</div>
		<p style="background:#333; height:500px;"><img style="width:100%; height:100%; object-fit: cover;" src="http://pic1.win4000.com/wallpaper/1/58b3f016463fa.jpg" alt=""></p>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(".syui-anim").each((i,e)=>{
					 var enter = $(e).attr("enter");
					 $(e).addClass(enter);
				})
				$("#nav li").hover(function(){			
					$(this).find(".navson").show();			
				},function(){
					let enter = $(this).find(".navson").attr("enter");
					$(this).find(".navson").removeClass(enter).addClass("syui-leave");	
					setTimeout(res=>{
						 $(this).find(".navson").hide();
						 $(this).find(".navson").removeClass("syui-leave");
						 $(this).find(".navson").addClass(enter);
					},350)
				})
			})
		</script>
		

	</body>
</html>