ブログトップ | Palette -fixative-

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

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

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

Qiita

CSSだけでアコーディオンを実装 - Qiita

https://qiita.com/takanorip/items/217f9c29715825de0fdc

今回はCSSのみでアコーディオンメニューを実装します。#DEMOhttp://codepen.io/takanorioki4/pen/grZpOp!(https://i.gyazo.com/409552...

web/EC業界に強い転職。正社員・派遣求人情報...

矢印付きのメニューをつくろう

https://webtant.net/201499

あけましておめでとうございます。フリーのマークアップエンジニア草野です。ちょっと間が空いてしまいましたが、第三回のテーマは「矢印付きのメニューをつくろう」です。今回はP...

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

右端に矢印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で、さらにめちゃくちゃ勉強になるサイト様🗽