グローバルナビ Navbar
Bootstrapで用意されているナビゲーションバー、Navbarの紹介。タイトルは分かりやすいように主にグローバルナビで使用されるコンポーネントということでつけています。
Bootstrapでレスポンシブなグリッドシステムの次に使いたくなるレスポンシブで表示が切り替わるメニュー。少し使い勝手が微妙に感じる部分もあるので注意しましょう。
※javascriptが使用されています。
グローバルナビの基本
Navbar使用するにあったっての最低限のソースコードが下記になります。
<nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="gnavi" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">Link1</a></li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> </ul> </div> </nav>
ソースの1行目から簡単に説明してきます。
.navbarでナビゲーションバーを使用しますと指定。
.navbar-defaultで白背景ベースのナビゲーションバー使用しますと指定しています。
こちらはもう1種類あり.navbar-inverseを指定すると黒背景ベースのメニューになります。
<!--ナビゲーションバーを使用、デファルト（白背景）の設定を使用しますと設定--> <nav class="navbar navbar-default">
2行目の.navbar-headerでナビゲーションバーのヘッダーですと指定。
ハンバーガーメニューやロゴなどを主に表示する領域になります。
<!--ナビゲーションバーのヘッダーを設定--> <div class="navbar-header">
3行目のbuttonから標準でスマホサイズの時に表示するハンバーガーメニューボタンを作成しています。collapseは英語で折り畳むの意味があるので画面が小さな時はメニューを折り畳むイメージかと思います。
data-targetで11行目からの表示するリンクメニューの任意のIDやクラスの指定をしています。複数navberを使用する際は名前を変更しないと他のメニューも開くので注意してください。
<!--スマホサイズ時のハンバーガーメニューを設定--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
4行目の.sr-onlyを指定したメニューはブラウザでは表示されません。音声ブラウザにハンバーガーメニューのボタンの存在を知らせるために設置しています。無くても表示に問題はありませんが公式でも設置しているのであった方が親切だと思います。
<!--音声ブラウザにメニューがあることを伝えています--> <span class="sr-only">メニュー</span>
5行目〜7行目はハンバーガーメニューを表示させるための3本線になります。
公式でフォントアイコンなどを用意してない理由は謎です。
<!--ハンバーガーメニューの三本線を設定--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
11行目ではウインドウサイズによって表示、表示が切り替わるように.collapse、.navbar-collapseを指定しています。
<!--ハンバーガーメニュー内に折り畳まれる部分の設定--> <div id="gnavi" class="collapse navbar-collapse"> <ul class="nav navbar-nav">
12行目ではリストタグに.navでナビゲーション.navbar-navでナビゲーションバーを使用しますという指定をしています。
<!--ナビゲーションバーを使用するメニューですと設定--> <ul class="nav navbar-nav"> <li><a href="">Link1</a></li> ... </ul>
グローバルナビのバリエーション
サイト名入り
ナビゲーションにサイト名を入れたパターン。
.navbar-header指定内に追加することでサイト名をリンクの前に入れることができます。
当サイトのように画像を入れることも可能ですが、CSSを複数調整しないと色々ズレがでます。こちらでは割愛させて頂きます。
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ... <a href="#" class="navbar-brand">Bootstrap3の使い方</a> </div>
ドロップダウンメニュー
リストタグに.dropdown-menuを指定することでドロップダウンメニューになります。
<ul class="dropdown-menu">
<li><a href="#">Link3-1</a></li>
<li><a href="#">Link3-2</a></li>
<li><a href="#">Link3-3</a></li>
</ul>
リンクの右寄せ
.navbar-rightを指定することでリンクが右寄せになります。
<ul class="nav navbar-nav navbar-right">
上部固定メニュー
.navbar-fixed-topを指定することでスクロールしても画面上部に固定されたメニューになります。
※使用の際は注意点があります。
z-index:1030が指定されていて他のコンテンツとは別のレイヤーに乗せるような形になるのでbodyにpadding-topを追加しないと画面が隠れる形になります。現バージョンではナビゲ−ションバーの高さが50pxなのでpadding-top: 70px;などと追記すると良い感じになります。指定サイズは任意です。
もう一点、ナビゲ−ションバーを中央に表示するは.containerまたは.container-fluidでナビゲーションをあらためて囲む必要があります。
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav>
下部固定メニュー
.navbar-fixed-bottomを指定することで画面下部に固定されたメニューになります。
使用の際の注意は上部固定メニューと同様です。padding-bottom: 70px;などをCSSに追記することでコンテンツを隠れないようにする工夫が必要です。
<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> ... </div> </nav>
グローバルナビの注意点
コンテンツのオーバーフロー
公式でも書いてある注意点になります。
ナビゲーションバー内にリンクが多数あったり、リンク名が長い時などにウィンドウサイズによってはカラム落ちするような形で表示されます。
公式の対策として書かれているのが下記になります。
- ナビゲーションバーで使用する数や量を減らす
- ブレイクポイントごとの表示設定を利用してウィンドウサイズごとの表示を切り替える
- ナビゲーションバーが切り替わるブレイクポイントを変更する。
3番目のブレイクポイントの変更は公式サイトでカスタマイズしてダウンロードするなどの方法があります。自分でCSSの調整する場合は自分が見た感じですと10数カ所変更箇所がありそうでした。。LESSやSASSで修正しない場合は大変そうです。
どの対策も根本的な解決ではないような気もしますが、当サイトでは3番目を利用して公式サイトでブレイクポイントのカスタマイズをしてカラム落ちしないようにしました。
下記のリンク先の最下部にデモを用意しましたので確認してみてください。