今回は、ナビゲージョンには欠かせないナビ、ナビバーの作成方法を紐解いていきたいと思います。
bootstrapのナビに関しては、navs、navbarとある
bootstrapのナビに関しては、本サイトではnavsとnavbarと２項目に分けて紹介されています。
まずそれぞれの使い分けなどについて私なりの解釈です。
navs
こちらは、ヘッダーに限らず、色々なシュチュエーションを考慮したナビです。
例えば、コンテンツ内のタブ表示のナビだったり、ボタンのナビだったり、
様々なナビに関してのマークアップ方法が解説されています。
navbar
ナビバーという名の通り、主にヘッダーによく使われるナビゲーションのことを指します。
ロゴがあって、メニューがあって、サーチフォームがある。
それがひとまとめにされているナビバーの作成方法が本サイトでは記載されています。
navsに関して
navsの基本ベース
ナビの基本コードはこちらです。
コードは、liで作成するタイプと、aタグで作成するタイプとで作成が可能です。
状況によってliにするかaにするか使い分けが可能となっています。
色々バリエーションはありますが、基本的にはこのコードがベースで、.navに様々なクラスと追加で付与することによって、バリエーションに対応します。
liで作成する場合のコード
.navで括ります。
liに.nav-itemでマークアップすることによって、liがナビのアイテムだということを設定します。aに.nav-linkをマークアップすることで、これがナビのリンクであることを設定します。
.activeを入れることによって、現在「アクティブ（選択）」されていることを表しますが、
navsの基本設定の場合は、特に色が変わったりなどはありません。
これらは、navbarでカレント表示するために必要ですが、基本スタイルでも.activeを入れることは可能ということみたいです。
表示サンプル
ソース
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
aで作成する場合のコード
表示サンプル
ソース
<nav class="nav"> <a class="nav-link active" href="#">アクティブ</a> <a class="nav-link" href="#">リンク</a> <a class="nav-link" href="#">リンク</a> <a class="nav-link disabled" href="#">リンク無効</a> </nav>
これが基本形で、ここからマークアップを増やしたらり、スクリプトの設定をすることで色々応用することができます。これが基本形で、ここからマークアップを増やしたらり、スクリプトの設定をすることで色々応用することができます。これが基本形で、ここからマークアップを増やしたらり、スクリプトの設定をすることで色々応用することができます。
navsの配置に関して
ナビゲーションの配置に関しては、
左寄り・中央・右寄りと配置することができます。
これらは４からのflexboxでの配置となりますので、マークアップ時のクラス名がflexboxに依存した名前付になっています。
ですので、flexboxを知っている方だと馴染み深いので、設定もしやすいかと思います。
配置に関しては、
.navを入れているulやdivに位置を設定するためのクラスを追加で入れるだけで可能です。
位置を設定するためのクラスは左寄せ（.justify-content-start）、中央寄せ（.justify-content-center）、右寄せ（.justify-content-end）がありますので、下記のようになります。
- <ul class=”nav justify-content-start”>
- <ul class=”nav justify-content-center”>
- <ul class=”nav justify-content-end”>
※ulはdivでもOK、divの場合はdivバージョンのコーディングで
フルでソースを記述するとこうなります。（ulで記述）
左寄せ（.justify-content-start）
表示サンプル
ソース
<ul class="nav justify-content-start"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
中央寄せ（.justify-content-center）
表示サンプル
ソース
<ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
右寄せ（.justify-content-end）
表示サンプル
ソース
<ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
縦型のnavs（.flex-colum）
こちらも基本のコードの頭.navが入っている部分に.flex-columを追加すれば縦型になります。
表示サンプル
ソース
<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
tab型のナビ（.nav-tab）
tabも基本的には.navと同じところに.nav-tabを追加でtabになります。
表示サンプル
ソース
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
ボタン型のナビ（.nav-pills）
ボタン型は、.navのところに.nav-pillsを追加でOK
表示サンプル
ソース
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
そのほかバリエーション
そのほか、ドロップダウン付きメニューを作成したり、javascriptでタブ付きパネルを作成したりと様々なバリエーションがありますが、全て基本形のナビに様々なクラスなどを付与して作成します。
なので、基本形の作りはしっかりと覚えておいた方が良いでしょう。
ドロップダウンをつける
ドロップダウンをメニューにつけます。
通常ナビのドロップダウン
表示サンプル
ソース
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li> //ドロップダウンをつけたいliに.dropdownをつける <li class="nav-item dropdown"> //ドロップダウンのボタン部分のリンクの設定をします。 //基本形のものに.dropdown-toggleと青い部分のソースを足しています。 <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">メニュー</a> //ドロップダウンする中身の部分のソース <div class="dropdown-menu">//.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="#">ドロップダウンメニュー4</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">リンク無効</a> </li> </ul>
タブ型ナビのドロップダウン（javascript）
表示サンプル
ソース
<ul class="nav nav-tabs" id="myTab" role="tablist"> //タブメニューボタン <li class="nav-item"> <a class="nav-link active" id="menu1-tab" data-toggle="tab" role="tab" aria-controls="menu01" aria-expanded="true" href="#menu01">アクティブ</a> </li> <li class="nav-item"> <a class="nav-link" id="menu02-tab" data-toggle="tab" role="tab" aria-controls="menu02" aria-expanded="true" href="#menu02">メニュー2</a> </li> <li class="nav-item"> <a class="nav-link" id="menu03-tab" data-toggle="tab" role="tab" aria-controls="menu03" aria-expanded="true" href="#menu03">メニュー3</a> </li> //ドロップダウンボタン部分 <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a> //ドロップダウン中身 <div class="dropdown-menu"> <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">ドロップダウン1</a> <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">ドロップダウン2</a> </div> </li> </ul> //タブパネル中身 <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="menu01" role="tabpanel" aria-labelledby="menu01-tab"> つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書 </div> <div class="tab-pane fade" id="menu02" role="tabpanel" aria-labelledby="menu02-tab"> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰 </div> <div class="tab-pane fade" id="menu03" role="tabpanel" aria-labelledby="menu03-tab"> つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書 </div> <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab"> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰 </div> <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab"> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰 </div> </div>
navの基本を抑えれば、navbarを作成する際にもしっかりと役立ちますので、
まずはこの基本形を抑えれば怖くないと思います！！
navbarsの作り方はこちら
https://lotusboast.website/website/bootstrap/%e3%80%90bootstrap-v4%e3%80%91%e3%83%8a%e3%83%93%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/
かいつまんで説明していますので、
さらに詳細はこちらから
Bootstrap nav
https://getbootstrap.com/docs/4.0/components/navs/