前回までの記事で下記のようなことを書いてきました。
・そもそもBootstrapとは
・基本となるコンテナやよく使用するスタイル(クラス)について
・強力なグリッドシステムやテーブルについて
特にグリッドシステムだけでもBootstrapを導入する意味はあります。
今回はさらに深堀して、Bootstrapを使用してナビゲーションメニューを作成する方法を解説していきます。
ナビゲーションメニューとは
そもそもナビゲーションメニューとはなんぞや？という方もいると思うので解説していきます。
ナビゲーションメニューとはWebサイトには必ずといって良いほど設置されており、各コンテンツへのリンクが貼られているものです。
Webサイトのヘッダーに設置されていることが多いです。
【Navs】ナビゲーションメニューの基本
Bootstrapでナビゲーションメニューを作成する中で基本となるNavsについて解説します。
Navsを使用することで色々なナビゲーションメニューを作成することができます。
順番に見ていきましょう。
基本文法
Navsの基本文法は以下の通りで、HTMLのulタグ、もしくはnavタグにクラスを設定します。
■記述例1：ulタグにクラスを設定した場合
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">リンク1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク3</a>
</li>
</ul>
ulタグにnavクラスを設定、liタグにnav-itemクラスを設定しaタグにnav-linkタグを設定することで、よくみるナビゲーションバーを作成することができます。
■記述例2：navタグにクラスを設定した場合
<nav class="nav"> <a class="nav-link" href="#">リンク1</a> <a class="nav-link" href="#">リンク2</a> <a class="nav-link" href="#">リンク3</a> </nav>
navタグにnavクラス、その中のaタグにnav-linkクラスを設定することで、記述例1と同じようなナビゲーションメニューが作成できます。
しかし、navタグには後述するNavbarのクラスを設定し、その中にulタグを記述し、nvaクラスを設定する方法のほうが一般的であるため、記述例1を抑えておけばOKです。
ナビゲーションメニューの位置を変更する方法
Navsで作成したナビゲーションメニューは何も設定しないと、左揃えのナビゲーションメニューとなります。
これを中央揃え、右揃えに変更したい場合はnavクラスを設定したタグに以下のクラスを設定します。
・中央揃えにする場合：justify-content-centerクラス
・右揃えにする場合：justify-content-endクラス
■記述例
<ul class="nav justify-content-center"> ・ ・ ・ </ul>
縦並びのナビゲーションメニューを作成する方法
Navsで作成したナビゲーションメニューは何も設定しないと、メニューのアイテムは横並びで表示されます。
これを縦並びに設定したい場合は、navクラスを設定したタグにflex-columnクラスを設定します。
■記述例
<ul class="nav flex-column"> ・ ・ ・ </ul>
タブ型のナビゲーションメニューを作成する方法
Navaではタブ型のナビゲーションメニューを作成することもできます。
タブ型のナビゲーションメニューにする場合は、navクラスを設定したタグにnav-tabsクラスを設定します。
■記述例
<ul class="nav nav-tabs"> ・ ・ ・ </ul>
ピル(薬のカプセルのような形)型のナビゲーションメニューを作成する方法
Navsではアクティブになっているアイテムをピル型に変更することもできます。
ピル型のナビゲーションメニューする場合は、navクラスを設定したタグにnav-pillsクラスを設定します。
■記述例
<ul class="nav nav-pills"> ・ ・ ・ </ul>
ナビゲーションメニュー内にドロップダウンリストを作成する方法
Navsではナビゲーションメニューのアイテムにドロップダウンリストを追加することもできます。
ドロップダウンリストを追加したい場合はnav-itemクラスを設定したタグにdropdownクラス、nav-linkクラスを設定したタグにdropdown-toggleクラスを設定する必要があるため、navクラスはulタグに設定しておく必要があります。
■記述例
<ul class="nav nav-tabs">
・
・
・
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウンリスト</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ドロップダウンアイテム1</a>
<a class="dropdown-item" href="#">ドロップダウンアイテム2</a>
<a class="dropdown-item" href="#">ドロップダウンアイテム3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
・
・
・
</ul>
nav-linkクラスを設定したタグにdata-toggle、role、aria-haspopup、aria-expanded属性は決まり文句となっているので、記述例をそのままコピペしてもらえればOKです。
また、nav-linkクラスを設定したタグの直下にあるdivタグに設定されているdropdown-dividerクラスはドロップダウンリストの区切り線を入れるためのものになるので、ドロップダウンリスト内に区切り線画不要な場合は不要です。
【Navbar】高度なナビゲーションメニュー
Bootstrapでナビゲーションメニューを作成する時は基本となるNavsと今から解説するNavbarを組み合わせて使用しいます。
Navbarを使用すると基本文法を記述するだけで、レスポンシブデザインに対応し、ハンバーガーメニューが実装できるなど多大なるメリットがあります。
基本文法
Navbarの基本文法は以下の通りで、HTMLのnavタグにnavbarクラスなどを設定します。
■記述例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">リンク1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク3</a>
</li>
</div>
</nav>
buttonタグやdivタグに色々と属性が記述してありますが、基本的には決まり文句になっています。
属性で注意が必要な点としてはbuttonタグのdata-target属性、aria-controls属性の値とdivタグのid属性の値をあわせるというところです。
この値を合わせることによってnavタグに設定しているnavbar-expand-画面サイズクラス(記述例ではlgを指定)の画面サイズ以下の画面サイズになった時にナビゲーションメニューを自動的にハンバーガーメニューに隠してくれます。
あと、記述例を見て頂けると分かるとおり、liクラスには前述したNavsで登場したnav-itemクラス、nav-linkクラスを使用するので、Navsで記述した通りリンクアイテムをドロップダウンリストにすることも可能です。
ナビゲーションメニューの色を変更する方法
ナビゲーションメニューの文字色はnavbar-テーマカラークラス、背景色はbg-テーマカラークラスを指定して変更できます。
■記述例
<nav class="navbar navbar-dark bg-primary"> ・ ・ ・ </nav>
テーマカラーの説明は「Bootstrap実践。コンテナなどの基本構造を解説」にて行っているので、そちらを参照ください。
ナビゲーションメニューにロゴ等を設置する方法
多くのWebサイトでは会社のロゴなどを表示しています。
そのようなロゴなどを表示する部分が上記の記述例でnavbar-brandクラスを設定しているタグになります。
■記述例
記述例ではaタグに使用していますが、h1タグやimgタグなどにも使用することができます。
トグル(ハンバーガーメニュー)の表示位置を変更する方法
トグル(ハンバーガーメニュー)はデフォルトでは左揃えで表示されますが、navbar-brandクラスを書く位置によって左揃え、右揃えを指定することができます。
navbar-brandクラスを指定したタグをbuttonタグより先に記述すると左揃え、後に記述すると右揃えになります。
■トグル(ハンバーガーメニュー)を左揃えで表示する記述例
<nav class="navbar navbar-expand-xl navbar-dark bg-dark mt-3 mb-3">
<a class="navbar-brand" href="#">ロゴ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
・
・
・
</nav>
■トグル(ハンバーガーメニュー)を左揃えで表示する記述例
<nav class="navbar navbar-expand-xl navbar-dark bg-dark mt-3 mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ロゴ</a>
・
・
・
</nav>
ナビゲーションメニューの表示位置を固定する方法
ナビゲーションメニューの表示位置は上や下に固定することができます。
上に固定する場合はnavタグにfixed-topクラスを指定し、下に固定する場合はfixed-bottomクラスを指定します。
■ナビゲーションメニューを上に固定する場合の記述例
<nav class="navbar fixed-top navbar-light bg-light"> ・ ・ ・ </nav>
■ナビゲーションメニューを下に固定する場合の記述例
<nav class="navbar fixed-bottom navbar-light bg-light"> ・ ・ ・ </nav>
まとめ
今回はナビゲーションメニューについて解説しました。
Bootstrapを使用しない場合はfloatやflex-boxを使用して作成するナビゲーションメニューを作成すると思いますが、Bootstrapを使用するとレスポンシブデザインに対応したナビゲーションメニューが簡単に作成することができます。
(Bootstrapのナビゲーションメニューは内部的にはflex-boxで作成されています)
ナビゲーションメニューを作成するためにはbuttonタグやdivタグに色々と独自の属性を記述する必要があり、難しそうに見えますが、基本的にはきまり文句を記述するだけなので特に暗記する必要はありません。
このページの記述例をコピペし、そこから微調整すればOKです。
前回解説したグリッドシステムも強力ですが、ナビゲーションメニューも十分強力で使いやすいので、Bootstrapを使用する場合はどんどん活用していきましょう。
