こんにちは、yutaです。
今日は、BootstrapのNavbarという機能を利用してWEBサイトのメニューバー(ナビゲーションバー)をレスポンシブ化する方法について解説します。
正直、Bootstrapは公式サイトのサンプルをコピペすれば動くので細かい説明というよりは、「自分のサイト用にカスタマイズするにはここを変更したら良いですよ。」という話をします。
1.Bootstrap公式ページからサンプルをコピペ
2.自分のサイト用に書き換え
3.動作確認
1.Bootstrap公式ページからサンプルをコピペ
まずは、公式ページからNavbarのサンプルをコピペしましょう。
2.自分のサイト用に書き換え
ここから自分のサイトに合わせて書き換えていきます。
ロゴ部分の書き換え
↑コード2行目がロゴ部分になります。公式サンプルでは「Navbar」という文字だけになっていますが、サイトのトップにはロゴ画像を使いたいですよね。
書き換えは<a></a>内に<img>タグで画像を挿入すればOKです。画像サイズは別途CSSで調整してください。
メニュー本体の書き換え
↑コード7〜34行目がメニュー本体になります。公式サンプルでは、<a>タグやドロップダウンメニュー、<form>タグなど色々使われていますが、基本的にはシンプルに<a>タグだけで問題ないので僕は以下のように書き換えました。
要するに、<a>タグを使ったリンクを4つ並べているだけですね。
idの書き換え(任意)
↑の公式サンプルコード3行目のdata-target、aria-controlsおよび7行目のidを任意の名前に書き換えておきましょう。(僕は、responsiveMenuとしました。)もちろんそのままでも動作しますが、複数のNavbarを使う際には、ここを書き換えておかないとお互いに影響してしまいます。
ブレイクポイントの書き換え(任意)
↑の公式サンプルコード1行目のnavbar-expand-lgではブレイクポイントをlgに指定してあります。Bootstrapでは、ブレイクポイントをsm、md、lg、xlの4種類用意してあるので好みに合わせてnavbar-expand-**の「**部分」を書き換えてください。
各ブレイクポイントの詳細に関しては「Bootstrapによるレスポンシブ対応の基礎」を参照してください。
3.動作確認
最終的なコードは以下のようになりました。
ブラウザで開いてみると↓のように画面幅が縮まるとメニュー表示用のボタンが出てきて、ボタンクリックでメニューをドロップダウン表示します。
今回は以上になります。ブログランキングに参加しています。↓のバナーをクリックしていただけると嬉しいです。では、また！
