グローバルメニューとサイドメニューに現在地を表示するJavaScript

※当サイトにはプロモーションが含まれています。

グローバルメニューやサイドメニュー、またはフッターメニューなど、現在地を表示するのに、文字色や背景色を変える動作をWEBサイトでよく見かけます。

下記の画像のようなサイトです。

グローバルメニューやサイドメニューの現在地表示例

今回、グローバルメニューとサイドメニューに現在地を表示するJavascriptを作成したので、備忘録として残しておきます。

グローバルメニューとサイドメニューに現在地を表示するJavaScript

ページが読み込まれたときに、現在のURLと一致するメニューリンクに、クラスactiveを追加するJavascriptです。

JavaScript

document.addEventListener('DOMContentLoaded', function () {

// 現在のページのパスを取得
var currentPath = window.location.pathname;

// グローバルメニューとサイドメニューのリンクを取得
var globalLinks = document.querySelectorAll('#global_menu a');
var sideLinks = document.querySelectorAll('.sidebar a');

// グローバルメニューのリンクに対する処理
globalLinks.forEach(function (link) {
var linkPath = new URL(link.href).pathname;
if (linkPath === currentPath) {
link.parentElement.classList.add('active');
} else {
link.parentElement.classList.remove('active');
}
});

// サイドメニューのリンクに対する処理
sideLinks.forEach(function (link) {
var linkPath = new URL(link.href).pathname;
if (linkPath === currentPath) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});

おまけとして、HTMLとCSSも記述しておきますが、冒頭の画像例のものとは違います。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Class Example</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- グローバルメニュー -->
<ul id="global_menu">
<li><a href="/">ホーム</a></li>
<li><a href="/about">アバウト</a></li>
<li><a href="/contact">コンタクト</a></li>
</ul>
<!-- サイドメニュー -->
<div class="sidebar">
<a href="/">ホーム</a>
<a href="/about">アバウト</a>
<a href="/contact">コンタクト</a>
</div>
</body>
</html>

CSS

/* activeクラスのスタイル */
.active {
background-color: #007bff;
color: white;
}

/* グローバルメニューのリンクのスタイル */
#global_menu a {
display: block;
padding: 10px;
text-decoration: none;
color: black;
}

/* サイドメニューのリンクのスタイル */
.sidebar a {
display: block;
padding: 10px;
text-decoration: none;
color: black;
}

以上です。

この例では、グローバルメニューとサイドメニューでしたが、フッターメニューにも応用することが可能です。

楽天市場の検索結果

1冊ですべて身につくJavaScript入門講座 [ Mana ]

2,794円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイッサツデスベテミニツクジャバスクリプトニュウモンコウザマナ発行年月：2023年03月02日ページ数：344p サイズ：単行本 ISBN：9784815615758 Mana（マナ）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア

改訂3版JavaScript本格入門 [ 山田祥寛 ]

3,520円(税込)【送料込】

楽天ブックス

山田祥寛技術評論社カイテイサンハンジャバスクリプトホンカクニュウモンモダンスタイルニヨルキソカラゲンバデノオウヨウマデヤマダヨシヒロ発行年月：2023年02月13日予約締切日：2022年12月14日ページ数：624p サイズ：単行本 ISBN：9784297132880 1　イントロダクション／2　基本的な書き方を身につける

JavaScript 第7版 [ David Flanagan ]

5,060円(税込)【送料込】

楽天ブックス

David Flanagan 村上列オライリー・ジャパンジャバスクリプトダイナナハンデイビッドフラナガンムラカミレツ発行年月：2021年12月02日予約締切日：2021年10月07日ページ数：784p サイズ：単行本 ISBN：9784873119700 原書第7版フラナガン，デイビッド（Flanagan,David）

JavaScript／DavidFlanagan／村上列【3000円以上送料無料

5,060円(税込)【送料込】

bookfan 1号店楽天市場店

著者DavidFlanagan(著) 村上列(訳)出版社オライリー・ジャパン発売日2021年11月ISBN9784873119700ページ数749PキーワードじやヴあすくりぷとJAVASCRIPT ジヤヴアスクリプトJAVASCRIPT ふらながんでびつど FLAN フラナガンデビツド FLAN9784873119700内容紹介サイ本

スラスラわかるJavaScript 新版 [ 桜庭洋之 ]

2,640円(税込)【送料込】

楽天ブックス

桜庭洋之望月幸太郎翔泳社スラスラワカルジャバスクリプトシンバンサクラバヒロユキモチヅキコウタロウ発行年月：2022年07月13日予約締切日：2022年05月20日ページ数：384p サイズ：単行本 ISBN：9784798173269 桜庭洋之（サクラバヒロユキ）中学生でインターネットに出会いプログラミングにはま