【スマホ対応】ハンバーガーメニューをCSSのみで作る

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

スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う．
これを見かけからハンバーガーメニューと呼ぶようだ．
恐らく，箇条書きのメニューを遠くから見ると「三」のように見えるからだろう．
ここではこのハンバーガーメニューを css だけで作る方法を紹介する．

javascript を使わない css だけの多階層ハンバーガーメニューの作り方

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

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

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

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

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

そういう観点から，ハンバーガーメニュー自体がスマホでもPCでも変わらずに表示できるという点でレスポンシブデザインに対応していると言える．
どういうことかというと，通常レスポンシブデザインというとブレイクポイント(ある一定の横幅)を設けて，その幅よりも狭まると別のスタイル(css)を読み込むという方法を取るが，ハンバーガーメニューの場合，ハンバーガーメニューのみで作っても，自動的にレスポンシブ対応といえるわけである．

サンプルコード

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

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

スタイルシート
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%;
}