MinatoNote

技術とか運営とか

Bootstrapで全ページ統一のナビゲーションバーを設置し、ページごとに「active」を変更する。

皆さん、bootstrapは使っていますか?
私は使っています。

bootstrapでページを作っていて、こう思いませんか?

「グローバルナビ、全ページに一つのHTMLにできなかなぁ....」

今回は、そんな悩みを解決してみたいと思います!

グローバルナビをHTMLファイルにする

まずは今まで使っていたグローバルナビを、単一のHTMLファイルにします。
今回は以下のグローバルナビを使います。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#"> tabindex="-1" aria-disabled="true"無効</a>
      </li>
    </ul>
  </div>
</nav>

active化したいリンクにidを付ける

activeのclassを付けたいリンクすべてにidを付けます。
ざっとこんな感じ

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" id="brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" id="home" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="link1" href="#">リンク1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="link2" href="#">リンク2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#"> tabindex="-1" aria-disabled="true"無効</a>
      </li>
    </ul>
  </div>
</nav>

Jqueryの導入

developers.google.com

GoogleCDNへアクセスし、3.x snippetのコードをサイトの<head></head>の間へ

このあと書くJavascriptより上である必要があるので、<head>内の高い位置に貼り付けてください。
これでJqueryのインストールは終了。簡単だね。

Javascriptの実装

HTMLファイルの読み込み

$(function(){
    $("#nav").load("navigation.html");
});

保存したHTMLデータがnavigation.htmlだとすると、このJavascriptで読み込むことができます。
注意として、Jqueryを読み込んだあとに書いてください。

HTMLファイルの表示

読み込んでも、表示しなければ意味がありません。

表示したい場所に、idを付けます。

<body>
    <div id="nav">
    </div>
</body>

Javascript#navと、HTMLのid="nav"の部分が同じものになるように注意してください。
これでページを閲覧すると、グローバルナビが表示されてるはずです。

GoogleChromeは、セキュリティの関係上ローカルファイルの読み込みができないため、表示されません。
MS Edgeとかをご利用ください

ページのアクティブ化

Bootstrapのグローバルナビでは、classにactiveを付けると、今いるサイトを明るく表示してくれる機能があります。
それを利用するには、個別にclassをいじる必要があるんですが、今回はjavascriptで実装します。

先程、active化したいリンクにidを付けました。
今から、そのidを持つ要素に対し、activeのclassを付けるjavascriptを書いていきます。

例)リンク1をactive化

$(window).on('load',function(){
    $('#link1').addClass('active');
});

ポイントは、読み込みタイミングです。

先程のJavascriptは、サイト読み込み時に実行されますが、このJavascriptは、サイトの読み込みが完了したあとに実行されます。

動作 実行タイミング
HTML読み込み サイト読み込み中
Class付与 サイト読み込み完了後

こういうことです。

なんでタイミングをずらすかというと、サイト読み込みが終わったタイミングでないと、Classを付与するHTMLデータの読み込み・表示ができていないからです。
つまり、ない要素にClassを付与することになるってことですね。

これでリンク1をactive化できました。

他にかんしてもこれと同様にできると思います。
お試しあれ。