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

2019年8月14日 HTML&CSS

javascript を使わないでハンバーガーメニューを作る

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

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

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

サンプルコード

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

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

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

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

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

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

HTML は

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

だが，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%;
}