ホームページ制作・印刷物デザイン・フォトレタッチ/名古屋を拠点としてトータルデザインのKNICK(ケニック)
「jQuery」を使ってグローバルメニューの「現在のページ」をCSSでスタイリングしちゃう方法
2016年10月14日  , ,

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

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

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

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

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

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

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

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

 

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

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

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