Twitter Bootstrapで固定ナビゲーションを使う

Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。
簡単なカスタマイズのメモです。

Bootstrap, from Twitterとは？

Twitter（ツイッター）社が提供しているBootstrap（ブートストラップ）はCSSのフレームワークです。
CSSを読み込むだけで簡単に使えます。
使い方はdiv要素などにclassを指定するだけです。

Bootstrap, from Twitter

グローバルナビゲーションを固定にする

ページの上部にあるナビゲーションを固定ナビゲーションにします。
スクロールしても同じ場所にあり続けます。
常にページ内の同じ位置にあり続けますのですぐにアクセスできます。

１．基本

body 要素のすぐ下に次のようにコードを書きます。

<body>
  <div class="navber navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
      ...
    </div>
   </div>
 </div>
...

入れ子になった３つのdivはセットで使います。

一番外側のdivの navbar-fixed-top というclassがナビゲーションを固定させるときに使うclassです。
contaner というclassのdivの内側にul要素やa要素、form要素などを入れてナビゲーションの項目を追加します。

通常の項目

通常はul要素を使って項目を追加してゆきます。

<ul class="nav">
  <li><a href="#">最新のエントリー</a></li>
</ul>

ナビゲーションのdivの中のul要素には nav というクラスをつけてください。
li要素の中のa要素は必須になります。

<ul class="nav">
  <li class="active"><a href="#">最新のエントリー</a></li>
</ul>

上のようにli要素に active というクラスがつくと項目がハイライトされ、選択された状態という意味になります。

<ul class="nab pull-right">
  <li class="active"><a href="#">最新のエントリー</a></li>
</ul>

ul要素に pull-right というクラスをつけると項目をフロートさせて右寄せにすることができます。

項目が１つだけのナビゲーションは次のようなコードになります。

<div class="navber navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li><a href="#">最新のエントリー</a></li>
      </ul>
    </div>
   </div>
 </div>

区切り

項目には区切り線を入れることもできます。

<ul class="nav">
  ...
    <li class="divider-vertical"></li>
  ...
</ul>

区切り線を表すli要素には何も入れてはいけません。

見えにくいですが縦の区切り線が入っているのがわかります。

サイトID（ブランド）

ナビゲーションの中にサイトIDを入れる場合には次のようにします。

<a class="brand">CMS専門Web開発者のブログ</a>

brand クラスがついたa要素がサイトIDを入れる器になります。
このa要素も pull-right というクラスを付加することで右寄せにすることができます。

なぜ通常の項目と区別する必要があるのか？

BootstrapのナビゲーションはResponsive Web Design（レスポンシブ・ウェブ・デザイン）に対応しています。

ブラウザの横幅にあわせて表示するコンテンツを変えることができます。
横幅がせまいときには次のような表示になります。

通常の項目は隠れて見えなくなります。
サイトIDは表示されたままです。

このように表示を制御するためにサイトIDは通常の項目と区別する必要があります。

検索フォーム

キーワード検索などのフォームを使うときには次のようなコードになります。

<form class="navbar-search pull-left">
    <input type="text" class="search-query" placeholder="Search">
</form>

form要素に navbar-search というクラスをつけます。
pull-left クラスをつけて明示的に左寄せにすることもできます。

２．ドロップダウンメニュー

ドロップダウンはul要素を入れ子にすることで簡単に作ることができます。

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      タグ
      <b class="caret"></b>
    </a>

    <ul class="dropdown-menu">
      <li><a href="#">a-blogcms</a></li>
      ...
    </ul>
  </li>
</ul>

ドロップダウンにしたい親要素のliには dropdown というクラスをつけます。

その中のa要素にも上記のようにクラスをつけてください。
data-toggle というデータ属性がありますが、これはJavaScriptでドロップダウンを動作させるのに必要です。

dropdown-menu というクラスをつけたul要素がドロップダウンしたときに表示する項目です。

３．レスポンシブルに対応する

ブラウザの幅が狭い時にはナビゲーションの項目を隠すことができます。

<div class="nav-collapse">
  <ul class="nav">
    <li><a href="#">最新のエントリー</a></li>
  </ul>
</div>

nav-collapse クラスの付いたdivの中にある項目はブラウザの幅が狭いときは表示されません。

幅が狭いときナビゲーションには表示されなくなりますがドロップダウンで表示することができます。

上の画像の赤枠の部分をクリックするとドロップダウンします。
幅が広い時には表示されません。

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</a>

このドロップダウンもJavaScriptで動作しますのでdata属性がついています。

レスポンシブに対応した簡単なナビゲーションは次のようなコードになります。

<div class="navber navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="nab-collapse">
        <ul class="nav">
          <li><a href="#">最新のエントリー</a></li>
        </ul>
      </div>

    </div>
   </div>
 </div>

４．組み合わせてみる

１〜３の手順を組み合わせるとこんなかんじです。

<div class="navber navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand">CMS専門Web開発者のブログ</a>
     
      <a class="btn btn-navbar"data-toggle="collapse"data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
     
      <div class="nab-collapse">
        <ul class="nav">
          <!-- 通常の項目 -->
          <li><a href="#">最新のエントリー</a></li>

          <!-- 検索フォーム -->
          <form class="navbar-search pull-left">
            <input type="text"class="search-query"placeholder="Search">
　        </form>
         
          <!-- ドロップダウン -->
          <li class="dropdown">
            <a href="#"class="dropdown-toggle"data-toggle="dropdown">
              タグ
              <b class="caret"></b>
            </a>
           
            <ul class="dropdown-menu">
              <li><a href="#">a-blogcms</a></li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

５．固定ナビゲーションをレスポンシブにするとき気をつける事

固定ナビゲーションは position:fixed; というCSSを指定されています。
position:absolute; と同じように高さがない状態です。

被ってしまっているの図

一番上までスクロールした状態では常にコンテンツとかぶってしまいます。
body要素に padding-top:60px; というように指定するなどしてナビゲーション用のスペースを開けておく必要があります。

しかし、困ったことにブラウザの幅が狭いときBootstrapの固定ナビゲーションは固定ではなくなってしまいます。
幅をせまくするとナビゲーションは高さを持ちますので今度はbody要素のpaddingを消してあげる必要があります。

間があいてしまっているの図

ページの横幅に併せてCSSを切り替えるにはCSS3のMedia Queriesを使います。
Bootstrap自体もMedia Queriesを使ってレスポンシブWebデザインを実現しています。

/*通常時*/

body {
  padding-top:60px;
}

/*ブラウザの横幅が980px以下のとき*/
@media (max-width: 980px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
  }      
}

このようにCSSを指定してスタイルを切り替えてください。

参考リンク

Bootstrap from Twitter