【CSSのみ】レスポンシブな多階層ハンバーガーメニューの作り方(サンプル付き)

ハンバーガーメニューとは

スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う．
これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ．
恐らく，箇条書きのメニューを遠くから見ると「三」のように見えるからだろう．
ちなみに「三」を押すと「×」に表示が切り替わって「閉じる」ボタンのようになる．
「三」が「開く」で「×」が「閉じる」になるわけだ．

ここではこのハンバーガーメニューの css のみでの作り方を紹介する．
(サンプルコード付き)

javascript を使わない css のみのレスポンシブな多階層ハンバーガーメニューの作り方

弊社のホームページはスマホ・タブレット用のナビゲーションメニューとしてハンバーガーアイコンを使ったメニューを採用している．(ハンバーガーボタンを使ったアコーディオンメニューともいう．)
当初は drawer.js を使用して作成されていた．

これを javascript や jQuery などを使用せず，CSS だけで実現したいと思い，デザインはそのままにスクリプトを書き替えたので，それをサンプルコードと共に掲載する．

パソコン用のドロップダウンメニューとページを分けて解説する．

階層にできるハンバーガーメニューの利用は狭いスマホだけに限らない

パソコンで表示されたメニューが横幅を超えて改行してしまう場合などにはスマホほどの狭い横幅でなくても，ハンバーガーメニューに切り替えることにより，メニューの崩れを防ぐことが出来る．
そのような場合にはパソコンで表示する場合でもハンバーガーメニューを使う場面は出てくる．

ドロップダウンメニューの縦の長さがブラウザの縦の長さを超えるほど伸びてしまった場合もハンバーガーメニューに切り替えることで「メニューが押せない」現象を回避することが出来る．
この場合はハンバーガーメニューへのブレイクポイントはブラウザの縦の長さをどこまでと仮定するかによって変わってくる．

ハンバーガーメニューはそれ自体がレスポンシブ対応

そういう観点から，ハンバーガーメニュー自体がスマホでもPCでも変わらずに表示できるという点でレスポンシブデザインに対応していると言える．

どういうことかというと，通常レスポンシブデザインというとブレイクポイント(ある一定の横幅)を設けて，その幅よりも狭まると別のスタイル(css)を読み込むという方法を取るが，ハンバーガーメニューの場合，ハンバーガーメニューのみで作っても，それがそのままレスポンシブ対応といえるわけである．

CSS のみで実装するハンバーガーメニューのサンプルコード

すぐ使えるようにサンプルコードを用意した．

サンプルページ
CSSのみでパソコン(PC)時にはドロップダウンメニューで表示され，スマホ(SP)時にはハンバーガーメニューで表示されるメニューを実現する方法
上記リンクを右クリックして，「ファイルを保存」するとサンプルコード(ソース)が保存される．
普通に左クリックすればサンプルページ(デモ画面)を見ることが出来ます．

見ると分かるように javascript は使用していない．
ハンバーガーメニュー実装時の参考にしてほしい．

スタイルシート
nav.css
こちらも同様にリンクを右クリックして「ファイルを保存」する．

サンプルページは余計な装飾やアニメーションは設定していないので自分で実装する時に自由に追加で設定してください．

CSS のみのハンバーガー・アコーディオンメニューにおける実装のポイント解説

トグルになっている場所はチェックボックスで実装

スマホ時のハンバーガーボタン(アイコン)やドロップダウンで子カテゴリを表示する部分はトグルなので，チェックボックスで実現する．

HTML は

<input type="checkbox" id="menu-navibtn"/>

<label id="navibtn" for="menu-navibtn">
  <span>
    <span>メニューを開く</span>
  </span>
</label>

for を使ってチェックボックスをこのラベルにする．

ただし，自前のハンバーガーメニューを描くので，CSS を

#menu-navibtn {
  display: none;
}

と書いて非表示にする．

子メニューに関して，HTML は

<a class="ib" href="/service/">サービス</a>
<input type="checkbox" id="menu-parent01"/>
<label for="menu-parent01">
  <span class="ib pd"><i class="fas angletoggle"></i></span>
</label>

となる．

awesome を使用しているが，fas は font 指定のためのもの．
angletoggle は (下矢印)のマーク
クリックするとサブメニューが表示されて，
(上矢印)のマーク
に代わる．

チェックボックスは display: none で非表示にして，label を使うことにより押す領域を設けている．

CSS は

#navi input[type="checkbox"]:checked ~ .menu-child {
  max-height: inherit;
  overflow-y: visible;
  visibility: visible;
}
.angletoggle:before {
  content: "\f107";
}
#navi input[type="checkbox"]:checked ~ * .angletoggle:before {
  content: "\f106";
}

となる．

checkbox の input で指定することにより，最上部メニューの id 毎に個別で適用しなくてよくなっている．

ハンバーガーメニューをスクロール可能にする

子メニューが表示されている時には縦方向のスクロールバーを表示して，縦を 100% にする必要がある．

position: fixed;

だけではメニューの固定しかされない．

#menu-navibtn:checked ~ #navi {
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}