きゃらりこ日誌

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">
			項目１<br>
			項目２<br>
			項目３<br>
			　⋮
	</nav>
</body>
</html>

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

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

関連記事