バニラJavaScriptだけで現在のページのメニュー項目を自動的に強調表示する方法

ウェブサイトのナビゲーションメニューで、現在表示中のページに対応する項目を自動的に強調表示する方法を、バニラJavaScriptだけで実装する手順を解説します。

ページを移動するたびに、現在のページに該当するメニュー項目をハイライト表示するのは、多くのウェブサイトで採用されている定番の機能です。jQueryなどのライブラリやフレームワークに頼らなくても、素のJavaScript(バニラJavaScript)だけで簡単に実現できます。

ここからは、HTML・CSS・JavaScriptの3つのステップに分けて、具体的な実装方法を見ていきましょう。

ステップ1: シンプルなメニューを用意する

まずは基本となるナビゲーションメニューのHTMLです。「ホーム」「会社概要」「お問い合わせ」の3つのリンクを持つ、ごくシンプルな構成になっています。

<nav class="navbar">
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

ステップ2: CSSでスタイリングする

次に、メニューの見た目を整えるための最小限のCSSを追加します。ここで注目すべきは .current クラスです。ステップ3のJavaScriptによって、現在アクティブなページのメニュー項目にこのクラスが付与され、リンクの文字色がオレンジ系(#df3e23)に変わる仕組みになっています。

.navbar {
	background-color: #111;
	padding: 1rem;
}
.navbar a {
	text-decoration: none;
	color: white;
	padding: 1rem;
}

.current {
	color: #df3e23;
}

ステップ3: JavaScriptで現在のページを判定してクラスを付与する

最後にJavaScriptです。このコードは、ページ上のすべてのリンク(document.links)を順番に調べ、その href が現在のページURL(document.URL)と一致するかどうかを判定します。一致するリンクが見つかれば、そのメニュー項目に current クラスを追加します。

let current = 0;
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href === document.URL) {
        current = i;
    }
}
document.links[current].className = 'current';

なお、変数 current はループ内で再代入されるため、const ではなく let で宣言する点に注意してください。const で宣言すると再代入時にエラーが発生します。

また、document.links はページ内のすべてのリンクを対象とするため、ナビゲーション以外に同一URLへのリンクが存在する場合は、querySelectorAll('.navbar a') などでメニュー内のリンクだけを絞り込むと、より確実に動作します。

これで完成です。ページを読み込むだけで、現在のページに対応するメニュー項目が自動的に強調表示されるようになります。サーバーサイドの処理やフレームワークを必要としない、数行のJavaScriptで実現できる手軽なテクニックなので、静的サイトでもすぐに活用できます。