現在見ているページのメニューの色を変更（ハイライト）する方法2

更新日：2021年1月10日

現在見ているページのメニューの色を変更させることにより、ユーザビリティ（ユーザーサイトの使い勝手の良さ）の向上に繋がります。昨今では今まで以上にユーザビリティやUI、UXについて言われることが多くなってきました。

以前の記事でも現在見ているページのメニューの色を変更（ハイライト）する方法について記載していますが、DreamWeaverを使っている人しか使うことの出来ない機能を使っていた為、今回は誰でも使えるという点がミソになります。

それでは現在見ているページのメニューの色を変更する方法ですが、jQueryを使います。
具体的にはjQueryのaddClassというメソッドを使うことで、実現出来ます。addClassを使うことでclassを追加することが出来ます。

まず、サンプルとしてHTMLの記述です。下記になります。

	
ホーム
	
会社概要
	
お問い合わせ

何てことないリストタグを使ったと普通のHTMLですね。
次にCSSは下記のようサンプルとしてに記述。

li {
	list-style: none;
}

.menu01, .menu02, .menu03 {
	display: inline-block;
	font-size: 15px;
	background-color: #CCC;
	padding: 7px;
}

シンプルなメニューになります。
HTMLとCSSを組み合わせて出来たものが下記になります。
これが通常時のメニューとなります。

• ホーム
• 会社概要
• お問い合わせ

次にメニューの色を変更（ハイライト）したバージョンのCSSをあらかじめ用意しておきます。
このCSSのclassをaddClassを使うことで適用する想定です。

.menu_hover {
	background-color: black;
	color: white;
}

背景色を黒に、文字色を白にするCSSです。
これをjQueryのaddClassで追加してみましょう。
会社概要のメニューに追加してみることにするので.menu02に適用してみます。

$(function() {
	$(".menu02").addClass("menu_hover");
});

適用してみると下記のようになります。

• ホーム
• 会社概要
• お問い合わせ

お分かり頂けましたでしょうか。
会社概要のメニューの色が変更されています。
これはmenu02にmenu_hoverというclassが当たっている為です。

つまり、各ページに色の変更をしたいメニューのclassを指定したjQueryの記述の一文を書くだけで、
現在見ているページのメニューの色を変更することが出来るということです。
とっても便利でしょ。私も最近はこちらの方法を使うことが増えてきました。何故ならDreamWeaverに依存しなくても済む為、他のテキストエディタでも実現可能で汎用性が高いからです。

いかがでしたでしょうか？
是非ご活用下さい。