cssで作る開閉で向きが変わる矢印付きアコーディオン!!!(タイトルママ
こちらのサイト様の合わせ技です。
ありがとうございます🙇♀️🙇♀️
とはいえやっと人様に還元できるようなコードが書けたよ。
右端に矢印Ver
デモ
「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。
HTML
バーを1つずつ開閉させるには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 { height: 0; overflow-y: hidden; transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/ -webkit-transition: padding-bottom 0.5s, padding-top 0.5s; -moz-transition: padding-bottom 0.5s, padding-top 0.5s; -ms-transition: padding-bottom 0.5s, padding-top 0.5s; -o-transition: padding-bottom 0.5s, padding-top 0.5s; } #menu_bar01:checked ~ #links01 li, #menu_bar02:checked ~ #links02 li { height: auto; /*開いたときに表示されるliの高さ*/ opacity: 1; background: #f1f1f1; padding: 10px; } /*開いたときの下の余白*/ #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; }
開いて表示させる部分にpaddingをつけると「transition: all 0.5s;」だと文頭も動いてしまうので、上下のみアニメーションさせたい場合は「transition: padding-bottom 0.5s, padding-top 0.5s;」とする🙋♀️
さらに仕組みがめちゃくちゃわかりやすいサイト様🙆♀️
サルワカ | サルでも分かる図解説明マガジン
98 Users
200 Pockets
ページが見つかりませんでした