ナビゲーションを作る

スマートフォンやタブレットでアクセスすると、自動でナビゲーションが畳まれるので便利です。

こういうのはもう「こういうものなんだ」とコピペしちゃった方が早いと思います。

<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>

ナビゲーションの開始とヘッダー部分

全体を囲うバー

<nav class="navbar navbar-default"> <!-- ヘッダー固定する場合は navbar-fixed-top 追加 -->
  <div class="container-fluid">
    要素が入る
  </div>
</nav>

先ずはナビゲーション全体をこのように囲います。ヘッダーを上部に固定したい場合は[navbar-fixed-top]を追加すると、このサイトのように上部固定になります。

サイト名などの部分を追加

<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 この指定はとても重要で、スマートフォンナビアイコン[三]で展開されるメニューの指定になります。

メニューを追加する

メニュー部分を囲う

<div class="collapse navbar-collapse" id="nav_targets"> <!-- ←これ重要 -->
  <ul class="nav navbar-nav">
  </ul>
</div>

id="nav_targets" これが上で書いたスマートフォンナビアイコン[三]に展開されるナビゲーションの指定になります。

リンクを追加する

<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"を指定すると選択状態になります。自動ではなく手動(なはず)

ドロップダウンするナビゲーションを追加する

<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へのリンクとお問合せへリンクさせています。

<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>