【Bootstrap】Navbarを利用してレスポンシブなハンバーガーメニューを作成

  • このエントリーをはてなブックマークに追加

画面幅によってヘッダー内のメニューがハンバーガーメニューに切り替わるECサイトをよく見かけます。今回は、Bootstrapに用意されているナビゲーションバーを使用し、レスポンシブなハンバーガーメニューを作成する方法をサンプルコードを提示しながら説明します。

  1. PCサイズ:ヘッダー内にメニュー表示
  2. レスポンシブなハンバーガーメニュー作成

 1. PCサイズ:ヘッダー内にメニュー表示

Bootstrapのナビゲーションバーを利用して、ヘッダー内に「ホーム・会社概要・製品一覧」のメニューを表示します。

.navbar レスポンシブなハンバーガーメニュー作成のためにラッピングするためのナビゲーションバー
.navbar-brand 会社名や製品名を入れる(.navbar内のコンテンツ)
.nav-item ナビゲーション項目
.nav-link ナビゲーション項目がリンクのため必要

●View

[Bootstrap] justify-content-end


Cssのフレックスボックスを利用すると、ブロック要素を手軽に並列配置することができます。justify-content-end(justify-content: flex-end)は、アイテムを後尾に寄せて配置します。

[Bootstrap] flex-grow-1


flex-growプロパティは、フレックスアイテムの伸び率を他のアイテムとの相対値(整数)で指定します。デフォルト値は0です。今回はメニュー一覧の幅を画面幅一杯に広げるため、1と指定します。

作成したヘッダー(ナビゲーションバー)は以下のようになります。会社名を左端に、メニュー項目を右端に配置しました。

 2. レスポンシブなハンバーガーメニュー作成

Bootstrapを利用すると、簡単にハンバーガーメニューが含まれるヘッダー(ナビゲーションバー)を作成することができます。

※今回はブレークポイントをmdにして、画面幅767px以下でハンバーガーメニューに切り替えるナビゲーションバーを作成します。

.navbar-light ハンバーガーメニューアイコンを表示するために必要
.navbar-expand{-sm|-md|-lg|-xl} レスポンシブなハンバーガーメニュー作成
どの画面サイズからハンバーガーメニューに切り替えるか指定可能
.navbar-toggler メニューの表示非表示を切り替える(折りたたむ)ためのトリガー要素に指定
.navbar-toggler-icon ハンバーガーメニューアイコン
.collapse navbar-collapse トリガーボタンによって表示非表示を切り替える要素(ナビゲーションアイテム)の親要素に指定
.navbar-nav ナビゲーションアイテムの並び順を指定

navbar-collapse


開発者ツールで確認すると、navbar-collapseクラスで「flex-grow: 1」と画面幅が768px以上の場合は「display: flex」が適用されます。

navbar-nav


開発者ツールで確認すると、navbar-navクラスで画面幅768px以上の場合にアイテムを横並び、画面幅767px以下の場合に縦並びにするため「display: flex」が適用されます。

●View

ハンバーガーメニューを利用しない場合は「d-flex」を指定する必要がありますが、Bootstrapで用意されているnavbar-collapseクラスやnavbar-navクラスを利用する場合は「d-flex」を指定する必要はありません。

作成したナビゲーションバーは以下のようになります。navbar-nav要素の中にある nav-link要素はBootstrapのスタイルが適用され、青からナビゲーションバーのカラー設定に合わせてグレーに色が変わります。

■画面幅:768px以上

■画面幅:767px以下

Boostrapを利用すると、レスポンシブなハンバーガーメニューが簡単に作成できます。

作成したナビゲーションバーのカスタマイズ方法はこちらの記事で説明しています。参考にご確認ください。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*