【JavaScript】現在のページに対応するナビゲーションメニューにスタイルを追加する方法

2024年7月29日2024年7月30日

皆さんこんにちは！IWACODEの岩村です！

今回は現在のページに対応するナビゲーションメニューのリンクに対して、「このリンクが今のページですよ～」といった感じでスタイルを適用する方法を解説いたします。

実際によくあるヘッダーデザインを用いて解説していきます！

今回は以下のようなヘッダーを作成します。

トップページを開いている想定なので、TOPの文字がオレンジになっています。

WORKSを開いたらWORKSの文字がオレンジに・・・といったような制御を行います。

HTML/CSS/JavaScriptの例

HTML

今回使用するデザインのHTMLを構築していきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ナビゲーションメニューのスタイル</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
</head>

<body>
  <header class="header">
    <h1 class="header__logo">iwacode</h1>
    <nav class="header__nav">
      <ul class="header__nav-list">
        <li class="header__nav-item"><a href="index.html">toppage</a></li>
        <li class="header__nav-item"><a href="about.html">works</a></li>
        <li class="header__nav-item"><a href="services.html">srevice</a></li>
        <li class="header__nav-item"><a href="contact.html">contact</a></li>
      </ul>
    </nav>
  </header>
  <script src="script.js"></script>
</body>

</html>

CSS

一番下にJavaScriptでクラスが付与された際のスタイルを記載しています。
※.is-activeが付与された際の指定

/* スタイルの初期化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

/* サイトの基本設定 */
html {
  color: #465572;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.header {
  align-items: center;
  background-color: #E9ECEF;
  display: flex;
  height: 80px;
  justify-content: space-between;
  padding: 0 40px;
}

.header__logo {
  font-family: "Caveat", cursive;
  font-size: 2rem;
  font-weight: bold;
}

.header__nav {
  font-family: "Roboto", sans-serif;
  font-size: .925rem;
}

.header__nav-list {
  display: flex;
  gap: 2em;
}

.header__nav-item>a {
  color: #465572;
  font-weight: bold;
  display: block;
  transition: .3s;
}

.header__nav-item>a:hover {
  color: #FF983A;
}

/* ↓↓↓↓↓　今回のポイント　↓↓↓↓↓ */
/* JavaScriptにて.is-activeクラスが付与された場合のスタイル */
.header__nav-item>a.is-active {
  color: #FF983A;
}
/* ↑↑↑↑↑　今回のポイント　↑↑↑↑↑ */

JavaScriptの記載

const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll(".header__nav-item a");

navLinks.forEach(link => {
  if (link.href === currentPath) {
    link.classList.add("is-active");
  }
});

JavaScriptの解説

分かりやすいよう１行ずつコメントを入れました。

// １）定数currentPathに現在開いているページのURLを格納
const currentPath = window.location.pathname;

// ２）定数navLinksに.header__nav-item a に該当する要素を格納
// 　　複数取得できるので配列となる
const navLinks = document.querySelectorAll(".header__nav-item a");

// ３）２で取得した要素をループで処理する
navLinks.forEach(link => {

  // ４）ここでのlink.hrefはaタグのhref属性に指定しているURL
  // 　　currentPathには現在開いているページのURLが入っているので、
  // 　　if文の===で比較し、一致している要素の場合、中の処理に入る
  if (link.href === currentPath) {

    // ５）linkにis-activeクラスを付与
    // 　　※linkはaタグのこと
    link.classList.add("is-active");
  }
});

処理の概要としては、aタグで指定しているURLと現在開いているページのURLを比較して、同一であれば、一致するhref属性を持つaタグに対して.is-activeクラスを付与するといったものになります。