使用css实现手风琴菜单

最新推荐文章于 2024-07-15 23:16:45 发布

Wrj6811

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量309

点赞数

分类专栏：前端小功能 css 文章标签： css html

本文链接：https://blog.csdn.net/Wrj6811/article/details/107570895

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

效果图：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手风琴菜单</title>
		<link rel="stylesheet" type="text/css" href="../lib/css/accordion.css"/>
	</head>
	<body>
		<div class="container">
			<div class="accordion-menu">
				<div class="item" id="item1">
					<a href="#item1" class="title">
						<span>Lorem ipsum dolor sit amet?</span>
						<i class="icon"></i>
					</a>
					<p class="text">
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
					</p>
				</div>
				<div class="item" id="item2">
					<a href="#item2" class="title">
						<span>Lorem ipsum dolor sit amet?</span>
						<i class="icon"></i>
					</a>
					<p class="text">
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
					</p>
				</div>
				<div class="item" id="item3">
					<a href="#item3" class="title">
						<span>Lorem ipsum dolor sit amet?</span>
						<i class="icon"></i>
					</a>
					<p class="text">
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
					</p>
				</div>
				<div class="item" id="item4">
					<a href="#item4" class="title">
						<span>Lorem ipsum dolor sit amet?</span>
						<i class="icon"></i>
					</a>
					<p class="text">
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
						Lorem ipsum dolor sit amet?
					</p>
				</div>
			</div>
		</div>
	</body>
</html>

css代码：

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
}

body{
	background: url(../image/dark.jpg) no-repeat center;
	background-size: cover;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;	
}
.container{
	max-width: 1200px;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.accordion-menu{
	width: calc(50% - 20px);
}
.title{
	background-color: #e77f67;
	display: flex;
	color: #fff;
	padding: 20px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	align-items: center;
	justify-content: space-between;
}
.icon{
	position: relative;
	width: 14px;
}
.icon::before,.icon::after{
	content: "";
	position: absolute;
	width: 14px;
	height: 3px;
	background-color: #fff;
	top: -1.5px;
} 

.icon::after{
	transform: rotate(90deg);
	transition: 0.5s linear;
}
.text{
	background-color: #ffffff60;
	color: #fff;
	line-height: 26px;
	margin: 6px 0;
	opacity: 0;
	height: 0;
}
.item:target .text{
	height: auto;
	opacity: 1;
	padding: 20px;
	margin: 12px 0;
}

.item:target .icon::after{
	transform: rotate(0);
}

@media screen and (max-width:960px) {
	.container{
		max-width: 600px;
	}
	.accordion-menu{
		width: 100%;
		margin: 20px 0;
	}
}

其中使用了 :target 选择器，在页面布局代码里面使用 id 来确定点击哪一个菜单。主要是把 p标签的高度置 0 ，opacity为0，让文本不显示出来，当点击了菜单之后，让那个菜单的 height 和 opacity 改变，又显示出文本内容。还有的是在右边的 “+” ,使用before和after两个伪类来实现，通过transform：rotate(90deg) 来形成 + ，当点击菜单时，after 的 transform的角度变成 0deg，形成一个动画效果。

Wrj6811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css实现手风琴菜单

效果图：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手风琴菜单</title> <link rel="stylesheet" type="text/css" href="../lib/css/accordion.css"/> </head> <body> <di.
复制链接

扫一扫

专栏目录