「jQuery」を使ってグローバルメニューの「現在のページ」をCSSでスタイリングしちゃう方法 | KNICK(ケニック)-ホームページ制作/WordPress導入/トータルデザイン/愛知・名古屋のフリーランスKNICK(ケニック)-ホームページ制作/WordPress導入/トータルデザイン/愛知・名古屋のフリーランス

「jQuery」を使ってグローバルメニューの「現在のページ」をCSSでスタイリングしちゃう方法

2016年10月14日　 jQuery, WordPress, 覚書

WEBサイトを制作する上で、ヘッダー箇所のメニューボタンは欠かせません。

ページ移動した際、現在閲覧しているページのメニューボタンのスタイルを変えてあげる事で「このページにいるよ！」とパッと見で分かりやすくなります。

jQueryでグローバルメニューボタンのアクティブ時のスタイルを適用させる方法を覚書。

まずは、<head>～</head>の間に下記のjQuery本体とメニューボタンのリンクをアクティブにする為のscriptを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
     var url = window.location;
        $('.globalnav a[href="'+url+'"]').addClass('active');
</script>

「.globalnav」の箇所はお好きなclassに変更してください。

次にメニューボタンに先程のclassを指定してあげます。

●このWEBサイトであればこの様な感じになります。

<ul class="globalnav">
  <li><a href="https://knickweb.com/">トップページ</a></li>
  <li><a href="https://knickweb.com/about">ケニックについて</a></li>
  <li><a href="https://knickweb.com/website">ウェブサイト制作</a></li>
  <li><a href="https://knickweb.com/portfolio-list">制作実績</a></li>
</ul>

※リンク先のURLはフルパス(http://～)で記述する必要があります。

これで下準備はOKなので、あとはCSSでアクティブ時のスタイルを指定してあげるだけです。

.active {
	color:#D89858;
}

スタイルが適用されない場合は、他のスタイルと競合している可能性がありますので、クラス名を変更してあげるか「color:#D89858 !important;」の様に「!important;」を付け優先度を指定してあげると良いかと思います。

超絶に簡単な作業でメニューボタンをアクティブにする事が出来ました☆

Works Menu

Tag Cloud