メニューをクリックしたときに、リストが広がって表示されて、もう一度押すとリストがなくなるメニューについて調べた。
それが、アコーディオンメニューと呼ばれるものだと初めて知った。
今回はそれを実装してみた。

ソース

アコーディオンメニューの実装方法は、jQueryかCSSの２つ。
CSSで実装してみた。

accordion_practice.html

<!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>

base.css

#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だけでアコーディオンを作る方法（レスポンシブ＆矢印付）

アコーディオンメニューをやってみた

ソース

解説1

解説2

おわりに

参考資料