メニューをクリックしたときに、リストが広がって表示されて、もう一度押すとリストがなくなるメニューについて調べた。
それが、アコーディオンメニューと呼ばれるものだと初めて知った。
今回はそれを実装してみた。
#ソース
アコーディオンメニューの実装方法は、jQueryかCSSの２つ。
CSSで実装してみた。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アコーディオンメニュー 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<div id="accordion">
<input type="checkbox" id="menu" />
<label for="menu">メニュー</label>
<ul>
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
</ul>
</div>
</body>
</html>
#accordion {
max-width: 300px;
}
#accordion #menu {
display: none;
}
#accordion label {
display: block;
background: #f00;
}
#accordion ul {
margin: 0;
padding: 0;
list-style: none;
}
#accordion li {
margin: 0;
padding: 0;
background: #0f0;
height: 0;
overflow: hidden;
transition: 0.5s;
}
#accordion a {
margin: 0;
padding: 0;
text-decoration: none;
}
#menu:checked ~ ul li {
height: 20px;
opacity: 1;
}
#解説1
label要素、チェックボックス、ul要素を使ってアコーディオンメニューを実装している。
まずは、メニューがリストではなく一つだけで表示されている状態にするのは、以下のコードで実現している。
#accordion li {
margin: 0;
padding: 0;
background: #0f0;
height: 0;
overflow: hidden;
transition: 0.5s;
}
重要なポイントは２つあります。
1つ目のポイントは、overflowプロパティを使い、値をhiddenにすることで、リストを非表示している。
ただし、これだけでは不十分だと知った。
heightプロパティでリストの高さを0にしないといけない。
overflowは表示領域からはみ出た部分を非表示にする。
リストの高さを0にすることで、文字は表示領域からはみ出る。
その結果、overflowプロパティのhiddenによってはみ出た部分が非表示になり、クリックしない限り、リストが表示されない。
2つ目のポイントは、transition。
これのおかげで、クリック後のリストが表示されるまでの動作を実現している。
値は、リストが表示されるまでの時間を設定する。
#解説2
次に、メニューをクリックしたときの動作についてです。
以下のコードで実現している。
#menu:checked ~ ul li {
height: 20px;
}
擬似クラスcheckedを使っている。
クリック時、チェックボックスにチェックが入った状態になります。
チェック状態のulのliに対して、高さを設定しています。
こうすることで、リストが表示されるようになります。
#おわりに
ここまで、読んでくれてありがとうございます。
自分なりに考え、理解して、解説してみました。
ここまで、読んだ上で、自分の解説が間違えているなら、是非指摘してくれると嬉しいです。
次回はjQueryで実装してみようと思います。
#参考資料
CSSでアコーディオンメニューを作成する方法【初心者向け】
CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）