解 説

グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。
ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。
Bootstrap本家のサンプルを確認してみましょう。

基本的なナビゲーションバーのサンプル

基本的なナビゲーションバーのHTML(Bootstrapのページサンプルより

これをそのまま使用してリンク部分を変更すればOKというわけですが、折角だからバラバラにして構造を知っておきましょう。

ナビゲーションバーの必須パーツ

サンプルのナビゲーションバーは少し複雑でわかりにくいですね。もっとシンプルに使いたい場合もあるでしょうし、シンプルなものに独自なデザインを取り入れたい要望もあるかもしれません。

ここでは最低限必要な構成を確認してみます。

navタグのclass

ナビゲーションバーのシンプルサンプル

HTMLコード

ナビゲーションバーとして最低限必要なパーツは次のとおりです。

  1. nav要素にnavbarとnavbar-defaultのクラス名を付けます。navbar-defaultをnavbar-inverseとすると黒系の配色になります。
  2. つぎにul要素にnavとnavbar-navクラスをつけます。
  3. カレントページにはactiveクラスをつけます。

クラスnavbarのçss内容は高さの指定とボーダーの指定、そしてposition:relativeの指定です。
クラスnavbar-defaultは背景色と文字色の指定です。更に疑似クラスやメディアクエリを併用するなどして、状況に応じたデザインの変更を行うようになっています。
これらはナビゲーションバーとしてのベースのデザインを決めています。

navbarとnavbar-default(navbar-inverse)の両方を指定しないとBootstrapのナビゲーションバーは機能しませんので必須のクラスになります。

.navbarのbootstrap.cssの内容

.navbar-defaultのbootstrap.cssの内容抜粋

ulタグのclass

ulタグのclassはnavとnavbar-navです。
navクラスはナビゲーションバーのulを初期化したり、li要素やa要素のpositionやdisplayの内容を決めたりしていますので必須のクラスになります。

.navのbootstrap.cssの内容

navbar-navクラスはliの並び方をメディアクエリでfloatさせたり通常フローにしたりとボックスのレイアウトを決める重要で必須クラスになります。

.navbar-navのbootstrap.cssの内容

カレントページの区別はactionクラスで行います。activeクラスは以下の通りです。

.activeのbootstrap.cssの内容

ナビゲーションバーにコンテナをつける

基本ナビゲーションバーの中にdivでクラスcontainer-fluidまたはクラスcontainerを付けるとブラウザの幅で可変幅になったり固定幅になったりします。用途に応じてどちらかのクラスを付けます。

ナビゲーションバーに可変幅コンテナをつけたサンプル
.container-fluidのbootstrap.cssの内容

ナビゲーションバーに固定幅コンテナをつけたサンプル
.container のbootstrap.cssの内容

ナビゲーションのヘッダーをつける

ナビゲーションのヘッダーはdivで作成してクラスnavbar-headerを付けます。
navbar-headerにはfloatが設置されていますので左にフロートします。
ナビゲーションヘッダーにはサイトの名前などを入れておきます。

.navbar-headerのbootstrap.cssの内容の抜粋

ナビゲーションバーの固定

ナビゲーションバーをページの上部に固定表示させるには、nav要素にnavbar-fixed-topクラスを追加します。

ナビゲーションバーをページの下部に固定表示させることもできます。その場合はnav要素にnavbar-fixed-bottomクラスを追加します。

ナビゲーションバーを固定するとナビゲーションバーの下に次の要素が潜り込んでしまいます。
それを回避するためにtopに固定した場合はbody要素にpadding-top:70px、bottomに固定した場合はpadding-bottom:70pxを設定しておきます。

ナビゲーションバーの固定サンプル
navbar-fixed-topとnavbar-fixed-bottomのbootstrap.cssの内容

スマートフォン用ナビゲーション

これまでの設定だとスマートフォンの場合常にナビゲーションが表示されて邪魔になります。
そのため、ハンバーガーボタンを付けてナビの表示と非表示を選択できるようにします。

スマートフォン用ナビゲーションサンプル
スマートフォン用ナビゲーション用HTMLコード

buttonタグで囲まれている部分ははハンバーガーボタンです。
span class=”sr-only”はスクリーンリーダー用です。実際にテキストは表示されませんが、スクリーンリーダ-が読み上げをしてくれます。
class=”icon-bar”は同じ内容が3つならんでいますが、これは横棒を3本並べています。これがいわゆるハンバーガーにあたるものです。
buttonタグ内が数行になっていますが、実際はハンバーガーの印を作成しているだけです。

次にハンバーガーボタンの機能は、buttonタグのクラス名に秘密があります。

navbar-toggleクラスはボタンの位置と形状を決めています。

navbar-toggleクラスのbootstrap.cssの内容

data-toggle=”collapse”はJavaScriptで必要になるものです。
このクラスがJavaScriptでクリック時にリストを開閉する機能を追加します。

data-target=”#bs-example-navbar-collapse-1″は開閉する範囲を囲ったdivタグのidを指定します。
もちろんid名は任意の名前を付けることができます。id名はユニークなものでなければなりません。

その他最初のサンプルのようにフォームを含めたりすることもできます。

WordPressのカスタムナビで使用する

WordPressでBootstrapのナビゲーションを使用するには少しWordPressの方でカスタマイズが必要です。
別途記事を書いていますのでコチラを参考にしてください。