JavaScript实现动态下拉收起菜单+css实现动画效果

最新推荐文章于 2024-07-17 13:07:23 发布

IT艺术

最新推荐文章于 2024-07-17 13:07:23 发布

阅读量7.6k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/baidu_31134013/article/details/63871879

版权

前端专栏收录该内容

7 篇文章

订阅专栏

1.实现下拉选项框

多的不说上代码：

HTML代码

<body>
	<div class="menu">
		<p>产品</p>
		<ul class="menubar">
			<li class="menuvalue" data-value="产品">产品</li>
			<li data-value="工具与镜像">工具与镜像</li>
			<li data-value="客户与伙伴">客户与伙伴</li>
			<li data-value="帮助与支持">帮助与支持</li>
			<li data-value="论坛与博客">论坛与博客</li>
			</li>
		</ul>
	</div>
</body>

CSS代码

		body,html,div,ul,li,p
	 	{
	 		margin: 0;
	 		padding: 0;
	 	}
	 	body{
	 		background-color: #34a250;
	 		color: #000;
	 	}
	 	.menu
	 	{
	 		width: 100%;
	 		height: 100%;
	 		position: relative;
	 	}
 		.menu p
 		{
 			position: relative;
			margin: 100px auto 0 auto;
			width: 150px;
			height: 30px;
			display: block;
			cursor: pointer;
			background-color: #fff;
			text-align: center;
			padding: 5px 0 0 0;
 		}
 		.menubar
 		{
 			position: relative;
 			width: 150px;
 			max-height: 0px;
 			margin: 0 auto;
 			overflow: hidden;
 			background-color: #968e8e;
 		}
 		.menubaropen
 		{
 			max-height: 200px;
 			transform-origin:50% 0;
			-webkit-animation:slide-down .5s ease-in;
			transition: all 0.3s ease-out;
 		}
 		.menubar li
 		{
 			list-style-type: none;
			width: 100%;
			padding: 5px 0 5px 0;
			text-align: center;
			display: block;
			cursor: pointer;
 		}
 		.menubar li:hover
 		{
 			background-color: #c90;
 		}
 		.menuvalue
 		{
 			background-color: #ddc61a;
 		}

添加动画的代码和css是放一起的及<style></style>中

		@-webkit-keyframes slide-down{
		0%{transform:scale(1,0);}
		25%{transform:scale(1,1.2);}
		50%{transform:scale(1,0.85);}
		75%{transform:scale(1,1.05);}
		100%{transform:scale(1,1);}
		}

JavaScript代码：（需要导入jquery的脚本库）

	<script src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.menu > p').on('click', function() {
			$('.menubar').toggleClass('menubaropen');
			});
			$('.menu ul li').on('click', function() {
				var _this=$(this);
				$('.menu > p').text(_this.attr('data-value'));
				_this.addClass('menuvalue').siblings('li').removeClass('menuvalue');
				$('.menubar').removeClass('menubaropen');
			});
		});
	</script>

完整代码可以到我的资源中下载（http://download.csdn.net/detail/baidu_31134013/9786724）或直接问我，回复可能会嘛24小时内