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

公開日:2019年8月14日 最終更新日:2020年05月02日

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

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

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

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

サンプルコード

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

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

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

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

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

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

HTML は

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

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

と書いて非表示にする.

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

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

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

CSS は

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

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

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

position: fixed;

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

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
ノウハウを書籍化!
Pagetop