きゃらりこ日誌

2019年02月

サイト管理 / 技術 / メモ

CSSだけでアコーディオンメニューを実装する

デザイン変更の度に仕組みを忘れてしまい、調べなおすのも面倒なので、ここにメモとして残しておきます。

仕組み

CSS3の疑似クラス:checked(チェックボックスの状態の確認)でチェックボックスがONになっているかを調べ、間接セレクタ~(兄弟要素に適用)を使ってつなげることで、アコーディオンメニュー・ボタンの表示を切り替えています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
#cBox, #close, #aMenu,
#cBox:checked ~ #open {
/* チェックボックス、×、アコーディオンメニューを隠す。 */
/* チェックボックスが☑だったら、≡を隠す。 */
display: none;
}
#cBox:checked ~ #close,
#cBox:checked ~ #aMenu {
/* チェックボックスが☑だったら、×とアコーディオンメニューを表示。 */
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="cBox">
<label id="open" for="cBox">≡</label>
<label id="close" for="cBox">×</label>
<nav id="aMenu">
項目1<br>
項目2<br>
項目3<br>
 ⋮
</nav>
</body>
</html>

チェックボックス代わりにラジオボタン、間接セレクタの代わりに隣接セレクタ+(すぐ下の弟要素に適用)を使っても構いません。

また<input>・<label>タグを、<form>タグで囲みたくなる衝動に駆られますが、チェックボックスとアコーディオンメニューが兄弟要素(同階層)ではなく、アコーディオンメニューが叔父叔母要素(?)になってしまい間接セレクタが使えなくなるので、やめておきましょう。
HTML5の文法上問題ないとはいえ、<form>で囲まないのはちょっと気持ちが悪いですが…
[ | この記事のURL ]