0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSSのみで作るアコーディオンメニュー

Last updated at Posted at 2021-11-08

アコーディオンメニュー

sample.html
<html>
<head>
<style>
.accordion {
	margin: 0px;
}
.acd-check {
	display: none;
}
.option {
	position: relative;
}
/* アコーディオンCLOSE */
.acd-label,
.acd-content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.1s;
}
.acd-label {
	font-size: 0.9em;
	border: solid 1px #ffffff;
	padding-top: 0.5em;
	padding-left: 1em;
	padding-bottom: 0.5em;
	padding-right: 0em;
	display: block;
	color: #ffffff;
	background-color: #4682B4;
	font-weight: bold;
}
/* プラマイ切り替え */
.acd-label::after,
.acd-label::before {
	content: "";
	position: absolute;
	right: 1em;
	top: 0.8em;
	width: 2px;
	height: 0.75em;
	background-color: #FFFFFF;
	transition: all 0.1s;
}
.acd-label::after {
	transform: rotate(90deg);
}
.acd-content {
	max-height: 0;
	overflow: hidden;
	background-color: #CCCCCC;
}
.acd-content p {
	margin: 0;
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-right: 0em;
	font-size: 0.7em;
	line-height: 1.5;
}
/* アコーディオンOPEN */
.acd-check:checked + .acd-label + .acd-content {
	max-height: 500px;
	transition: all 1.5s;
}
.acd-check:checked + .acd-label::before {
	transform: rotate(90deg) !important;
}
</style>
</head>
<body>
<div>
<div style="width:250px;">
	<form>
		<div class="accordion">
			<div class="option">
				<input type="checkbox" id="acd-label1" class="acd-check" />
				<label class="acd-label" for="acd-label1">メニュー1</label>
				<div class="acd-content">
					<p><a href="#">コンテンツ1</a></p>
					<p><a href="#">コンテンツ2</a></p>
					<p><a href="#">コンテンツ3</a></p>
					<p><a href="#">コンテンツ4</a></p>
					<p><a href="#">コンテンツ5</a></p>
				</div>
			</div>

			<div class="option">
				<input type="checkbox" id="acd-label2" class="acd-check" />
				<label class="acd-label" for="acd-label2">メニュー2</label>
				<div class="acd-content">
					<p><a href="#">コンテンツ6</a></p>
				</div>
			</div>

			<div class="option">
				<input type="checkbox" id="acd-label3" class="acd-check" />
				<label class="acd-label" for="acd-label3">メニュー3</label>
				<div class="acd-content">
					<p><a href="#">コンテンツ7</a></p>
				</div>
			</div>
		</div>
	</form>
</div>
</div
</body>
</html>
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?