jQuery

【jQuery】ナビゲーションメニューの現在地を動的に表示させる方法

よくあるUIシリーズです!

今回は、ナビゲーションメニューで今いる場所を動的にスタイリングする方法です。

仕組み的には最も簡単かつ便利な「クラスのつけ外し」で可能になっていますが、仕組みを理解しておくことは重要です。

 

めちゃくちゃよく使う機能なので、覚えておくと捗りますよ!

 

それでは解説していきましょう。

 

ナビゲーションメニューの現在地を動的に表示させる

 

まずは完成イメージです。

よくあるパターンで、現在開いているページがわかりやすいよう、ナビゲーションメニューにスタイルを当てています。

 

これを実装するには、jQueryとCSSで簡単に作ることができます。

以下のコードを使用しますが、メニューの横並びや余白など、そのほかの記述は割愛させてもらいます。

 

HTML

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <header class="site-header">
      <nav class="site-header--nav">
        <ul class="site-header--menu">
          <li class="site-header--item"><a href="/" class="site-header--link">TOP</a></li>
          <li class="site-header--item"><a href="/menu1/" class="site-header--link">menu1</a></li>
          <li class="site-header--item"><a href="/menu2/" class="site-header--link">menu2</a></li>
          <li class="site-header--item"><a href="/menu3/" class="site-header--link">menu3</a></li>
          <li class="site-header--item"><a href="/menu4/" class="site-header--link">menu4</a></li>
        </ul>
      </nav>
    </header>

 

CSS

/* 現在地表示のスタイル */
.site-header--link.active {
  background-color: #fff;
  color:#333
}

 

jQuery

$(document).ready(function() {
  if(location.pathname != "/") {    //サイトURLのパスが"/"じゃなかったら
      $('.site-header--link[href^="/' + location.pathname.split ("/")[1] + '"]').addClass('active');    //headerのaタグhref属性と、表示ページのURLが一緒だったら、activeクラスをつける
  } else $('.site-header--link:eq(0)').addClass('active');
  //そうでなければ、activeクラスをつける(トップページの場合)
});

 

 

コメントを入れてますが、簡単に解説していきましょう。

サイトURLのパスを取得する

location.pathnameで、サイトURLのパスが取得できる。

location.pathname
//結果:/menu1/index.html

 

 

split()で、文字列を分割する

.splitで文字列を分割し、配列としてpathnameに格納する。
.split(“区切り文字”)とすれば、任意の文字で分割できる。

 

例えば、当ブログのCODEカテゴリーでlocation.pathnameを実行してみると、、

こんな感じで実行されます

 

この記述は、pathnameという配列の中に["","category","code",""];が入っている状態になります。

これで、上記のjQueryの意味もわかりますね!