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

最終更新日: 公開日: 2019年08月

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML は

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

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

と書いて非表示にする.

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

となる.

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

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

CSS は

となる.

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

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

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

position: fixed;

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

 タグ: , , , ,  
 

Contact

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

 
Apache Chrome Chrome 拡張機能 CSS Git Google HTML javascript Page Speed Insights PHP python SEO Windows WordPress Youtube z-index アナリティクス エディタ サーチコンソール サーバー管理 スライダー タグマネージャー テレワーク デザイン データベース ネットワーク フォーム ページ閲覧解析 マーケティング リッチリザルト レスポンシブ レスポンシブ対応 ログ解析 ローカル環境構築 営業 実装
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop