開閉の仕組み

実際にコーディングする前に開閉の仕組みを理解することをお勧めします。開閉の仕組みは下図のようになっています。

開閉メニューを構成するタグは、input、label、ul、liの4タグです。

開閉のトリガーは、inputタグが担います。inputタグのon/off状態によってメニューが開いたり閉じたりするようにcssを書きます。ただし、チェックボックスではクリックしにくいので実際にはinputタグに紐づけたlabelが開閉ボタンとなります。

• labelをクリックすると、checkbox(inputタグ)のon/off状態が切り替わる
• checkboxがoffの場合は、それに続くulタグにmax-height:0;とoveflow:hidden;とすることで、メニュー内容のリストを隠します。
• checkboxがonの場合は、それに続くulタグにmax-height:200vh;とすることで、メニュー内容のリストが縦に開いたように見せます。

cssはcheckboxのon/offに応じてそれぞれスタイルを指定することができます。ですのでlabelがクリックされてcheckboxのon/offが切り替わると、cssが自動的にスタイルを切り替えてくれるというカラクリです。

開閉メニューのコード

開閉の仕組みが分かればあとはhtmlとcssでコーディングするだけです。上で説明した開閉の仕組みを実現するシンプルなhtmlとcssを用意しました。

html

htmlは下記の通り。上で説明した図と照らし合わせてイメージしてください。

<div>
  <input type="checkbox" id="inp" value="off">
  <label for="inp">メニュー</label>
  <ul>
    <li>りんご</li>
    <li>ごりら</li>
    <li>らっぱ</li>
  </ul>
</div>

css

cssは下記の通り。わかりやすさを重視して全てタグで指定していますが、実際に使用する時はhtmlにclassを付けてclass名で指定した方がスタイルの混同を防ぐことができます。

input[type='checkbox']{
  display: none;
  appearance: none;
}
ul{
  max-height: 0;
  overflow: hidden;
  transition-duration: 0.3s;
}
input[type='checkbox']:checked + label{
  /* 「メニュー」ラベルのスタイルも切り替える場合はここに記述 */
}
input[type='checkbox']:checked ~ ul{
  max-height: 200vh;
}

本サイトでも、ウィンドウ幅が約500px以下では上で説明した開閉メニューを使っています。PCで見ている人は試しにウィンドウ幅を狭くして、動作を見て下さい。