CSSだけで作るハンバーガーメニュー

2019年8月14日 HTML&CSS

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

これをCSS だけで実現したいと思い，デザインはそのままにスクリプトを書き替えた．

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

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

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

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

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

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

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%;
}