ナビゲーションを作る
スマートフォンやタブレットでアクセスすると、自動でナビゲーションが畳まれるので便利です。
こういうのはもう「こういうものなんだ」とコピペしちゃった方が早いと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <nav class="navbar navbar-default "> <div class="container-fluid"> <!-- ヘッダー部分 ================ --> <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstap</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_target"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- 中央のナビゲーション部分 ================ --> <div class="collapse navbar-collapse" id="nav_target"> <ul class="nav navbar-nav"> <!-- リンクのみ --> <li class="active"><a href="#">Nav 1</a></li> <li><a href="#">Nav 2</a></li> <!-- Nav3 ドロップダウン --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav3 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li class="divider"></li> <li><a href="#">link3</a></li> </ul> </li> <!-- Nav4 ドロップダウン --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li class="divider"></li> <li><a href="#">link3</a></li> </ul> </li> </ul> <!-- 右寄せになる部分 ================ --> <ul class="nav navbar-nav navbar-right"> <!-- リンクのみ --> <li><a href="#">Nav 5</a></li> <!-- Nav6 ドロップダウン --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav6 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li class="divider"></li> <li><a href="#">link3</a></li> </ul> </li> </ul> </div> </div></nav> |
ナビゲーションの開始とヘッダー部分
全体を囲うバー
1 2 3 4 5 | <nav class="navbar navbar-default"> <!-- ヘッダー固定する場合は navbar-fixed-top 追加 --> <div class="container-fluid"> 要素が入る </div></nav> |
先ずはナビゲーション全体をこのように囲います。ヘッダーを上部に固定したい場合は[navbar-fixed-top]を追加すると、このサイトのように上部固定になります。
サイト名などの部分を追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <nav class="navbar navbar-default "> <div class="container-fluid"> <!-- ヘッダー部分 ================ --> <div class="navbar-header"> <a class="navbar-brand" href="#">Header</a> <!-- この部分がスマートフォンで[三]と表示されるナビゲーションボタンになる --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_target"> <!-- ←これ重要 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div></nav> |
[三]アイコンですが、ボタンとラインで表現しているようです。
data-target="#nav_target この指定はとても重要で、スマートフォンナビアイコン[三]で展開されるメニューの指定になります。
メニューを追加する
メニュー部分を囲う
1 2 3 4 | <div class="collapse navbar-collapse" id="nav_targets"> <!-- ←これ重要 --> <ul class="nav navbar-nav"> </ul></div> |
id="nav_targets" これが上で書いたスマートフォンナビアイコン[三]に展開されるナビゲーションの指定になります。
リンクを追加する
1 2 3 4 5 6 | <div class="collapse navbar-collapse" id="nav_targets"> <!-- ←これ重要 --> <ul class="nav navbar-nav"> <li class="active"><a href="#">Nav 1</a></li> <!-- class="active" が現在のページでアクティブになります。 --> <li><a href="#">Nav 2</a></li> </ul></div> |
アクティブなページはLIにclass="active"を指定すると選択状態になります。自動ではなく手動(なはず)
ドロップダウンするナビゲーションを追加する
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="collapse navbar-collapse" id="nav_targets"> <ul class="nav navbar-nav"> <!-- ドロップダウン --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">link 1</a></li> <li class="divider"></li> <li><a href="#">link3</a></li> </ul> </li> </ul></div> |
以下のコードを入れると▼が表示されます。
1 | <span class="caret"></span> |
ナビゲーションの途中でラインを入れる場合は以下のように。
1 | <li class="divider"></li> |
右寄せのメニューを追加する
メインメニューとは隔離しておきたいサブメニューなど。このサイトだとSTUDIO KEYへのリンクとお問合せへリンクさせています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <nav class="navbar navbar-default "> <div class="container-fluid"> <div class="collapse navbar-collapse"> <!-- 右寄せになる部分 ================ --> <ul class="nav navbar-nav navbar-right"> <!-- リンクのみ --> <li><a href="#">Link</a></li> <!-- Nav6 ドロップダウン --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">link 1</a></li> </ul> </li> </ul> </div> </div></nav> |