CSSで作る開閉で向きが変わる矢印付きアコーディオン(レスポンシブ対応)

cssで作る開閉で向きが変わる矢印付きアコーディオン!!!(タイトルママ

こちらのサイト様の合わせ技です。
ありがとうございます😭😭

とはいえやっと人様に還元できるようなコードが書けたよ。

右端に矢印Ver

デモ

「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。

HTML

inputのid名とlabel名を連動させるのがポイント。
つまり3つ目を増やすときはcssにmenu_bar03を追加する。

<div class="menu">
  <input type="checkbox" id="menu_bar01" />
  <label for="menu_bar01">バー01</label>
  <ul id="links01">
    <li>内容01-A</li>
    <li>内容01-B</li>
    <li>内容01-C</li>
  </ul>
  <input type="checkbox" id="menu_bar02" />
  <label for="menu_bar02">バー02</label>
  <ul id="links02">
    <li>内容02-A</li>
    <li>内容02-B</li>
    <li>内容02-C</li>
  </ul>
</div>

CSS

アニメーションを矢印のcssに追加すると、矢印がクルっとなってたのしい。

/*アコーディオン全体*/
.menu {
	width: 100%;
	padding: 10px 10px 20px;
}
.menu input {
	display: none; /*チェックボックスを隠す*/
}

/*バー部分*/
.menu label {
	cursor :pointer;
	display: block;
	text-decoration: none;
	color: #fff;
	line-height: 1;
	position: relative;
	margin: 0 0 10px;
	padding: 10px;
	background-color: #333;
}

/*開いたときに表示される部分*/
.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1px;
}
.menu li {
	max-height: 0;
	overflow-y: hidden;
	-webkit-transition: all 0.5s; /*閉じるときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
	max-height: 30px; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	-webkit-transition: all 0.5s; /*開くときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
 /*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child {
	margin-bottom: 20px;
}

/*閉じた状態の矢印描画*/
.menu label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	right: 2%;
	top: 0;
	bottom: 15%;
	margin:auto;
}
/*開いた状態の矢印描画*/
.menu input[type=checkbox]:checked + label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	right: 2%;
	top: 7%;
	bottom: 0;
	margin:auto;
}

こちらは左に>の矢印Verで、さらにめちゃくちゃ勉強になるサイト様🗽

コメントを残す