レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。
ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。
Contents
アコーディオンメニュー
今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。
hello.world!hello.world!hello.world!hello.world!基本的なやり方
どうやって実装するかを簡単に説明します。
labelをクリックする
アコーディオンメニューのクリック部分になります。
labelクリックでチェックボックスにチェックを付けたり外したりする
チェックボックスはアコーディオンメニューの表示・非表示を切り替えるフラグとして使います。あくまでフラグとして使うので、Web上には表示しません。
CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更する
CSSの擬似クラス:checkedと、隣接セレクタを使います。擬似クラス:checkedと隣接セレクタは下記リンクより詳細を確認してみてください。
:checked – CSS: カスケーディングスタイルシート | MDN
隣接兄弟結合子 – CSS: カスケーディングスタイルシート | MDN
ベースのHTML・CSS
次にソースコードを見ていきます。
HTML
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">クリックで開く1</label>
<div class="acd-content">
<p>hello.world!</p>
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2</label>
<div class="acd-content">
<p>hello.world2!</p>
</div>
以下同じ
2行目
labelはforにinputのID名を入れることでラベルをクリックしてもチェックボックスにチェックを付け外しできます。これを利用して、非表示のチェックボックスにチェックを付け外しします。
サンプルです。下の「ここをクリック！」の文字をクリックして、チェックを付け外ししてみてください。
CSS
.acd-check{
display: none;
}
.acd-label{
background: #333;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
}
.acd-content{
border: 1px solid #333;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
height: 40px;
opacity: 1;
padding: 10px;
visibility: visible;
}
2行目
チェックボックスは前述のとおり、表示・非表示を切り替えるフラグとして使うだけですので、CSSでdisplay: none;にします。
11行目〜
表示・非表示を切り替えるボックス要素acd-contentは、チェックが入っていない状態（非表示）の時は、height: 0;opacity: 0;visibility: hidden;
としています。
またアニメーションさせるためtransition: .5s;
も設定しています。
19行目〜
.acd-check:checked + .acd-label + .acd-contentと指定することで、チェックボックスにチェックが入った状態のacd-contentという指定ができます。
そして、height: 40px;opacity: 1;visibility: visible;とすることで非表示から表示へアニメーションさせています。
注意点は、height: auto;ではアニメーションがおかしくなってしまうので、明確な数値を指定する必要があります。
では、改めて確認してみましょう。わかりやすくするため、こちらはあえてチェックボックスを非表示にしていません。
See the Pen accordion menu2 by Kiyonobu Kasuga (@kiyonobu-kasuga) on CodePen.
チェックボックスを非表示にしました。
See the Pen accordion menu by Kiyonobu Kasuga (@kiyonobu-kasuga) on CodePen.
応用編 アイコンで表示・非表示状態をわかりやすく
基本的な動きは実装できました。ただこれだけではあれなんで、アコーディオンメニューの開閉状態をアイコンでわかりやすくしてみたいと思います。
hello.world!hello.world!hello.world!hello.world!HTML
HTMLは変更なしです。
CSS
.acd-check{
display: none;
}
.acd-label{
background: #0068b7;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
position: relative;
}
.acd-label:after{
background: #00479d;
box-sizing: border-box;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
height: 52px;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0px;
}
.acd-content{
border: 1px solid #333;
display: block;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label:after{
content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
height: 50px;
opacity: 1;
padding: 10px;
visibility: visible;
}
10行目
アイコンをposition: absolute;で配置するので、ラベルはposition: relative;にしておきます。
12行目〜
ラベルに:after擬似要素でアイコンを設定します。アイコンはFont Awesomeを使用しました。
33行目〜
チェックが入った時のアイコンを変更しています。
まとめ
というわけで、CSSだけで作るアコーディオンメニューをやってみました。
今回のポイントはCSSの擬似クラスや隣接セレクタを使っている点です。意外と知らなかったり、忘れている擬似クラスやセレクタがあったりするので、これを機に調べてみると新しい発見があるかもです。
今回の記事に関連して「jQueryとCSSで作るアコーディオンメニュー」という記事も書いていますので、興味がある方はぜひチェックしてみてくださいね。
RELATED ARTICLES
