[web関連]jQueryを使用してメニュー上の現在地をハイライトする[備忘録]

ご興味の無い方にとっては意味不明すぎる[web関連]ブログ
だと思われますが、

独り言のようにアップしてしまおう。

時折謎のパズルだとか、謎のおみくじだとか
勉強から思わぬ副産物も生まれますのでチョイチョイチェックして下さい。
(頼む、チェックしてくれ)

今回の記事は備忘録を兼ねたただのTIPSなので
興味の無い方はすっ飛ばして下さいね。



毎度我がのサイトを例に出していてどうかと思われますが、
現在地のメニューをハイライトした例を見る。
上記のサイトでは、グローバルメニュー部分をクリックして
ページ遷移後の画面で、現在地がハイライトされるようにしています。

例: 「ABOUT」メニューをクリックすると、リンク先の「ABOUT」ページ上で
「ABOUT」の背景がグレーになっている。(何回ABOUT言うねん)

CMSとかではない通常のサイトであれば、jQueryを使用することで
以下のコードで楽々とこれを導入できます。

こちらのサイトのお世話になりました。(かちびと.net)
 m(_ _)m

以下 jQueryのコード。

<script>
 $(function(){
    // 変数'url'に現在のurlを代入。 
    var url = window.location;
    // ハイライト対象に(クラス'current')を追加する。 ("#menu li a"は一例です)
    $('#menu li a[href="'+url+'"]').addClass('current'); 
 });
</script> 

var url = window.location;

で、 まず変数

url

に現在のurlページを代入しています。

$('#menu li a[href="'+url+'"]').addClass('current');

の

#menu li a

の部分は任意になるのですが、
ハイライトの対象として含まれる

a

に

'current'

クラスを付与する、
というコードになっています。

したがって、CSSで

a.current

も準備してあげましょう。

以下CSSの一例

<style>
 #menu li a{color: black;} /* 通常 */
 #menu li a.current{color: red;} /* ハイライトされているときの色 */ 
</style> 

以上です。

※一つ注意しておきたいのが、htmlファイル上で
グローバルナビゲーション自体のリンク先設定を
「相対パス」ではなく、「絶対パス」で 記述する必要があるコードです。

<a href="about.html">ABOUT</a><!-- xだめ！ -->
<a href="http://-----.---.com/about.html">ABOUT</a><!-- oオッケー！ -->

jQueryのコードを色々変更加えれば相対パスでの指定もできるのでしょうが、
この方が楽だし、
更にCMSでない限りはグローバルメニューは絶対パスで記述しておいたほうが
良いですしね。

ちなみに「jQuery メニュー　ハイライト」等で検索すると
便利なjQueryのプラグインも出てきますね〜。

というわけで、いいかげんJavaScriptとjQueryをもっと
勉強する、か。


jQuery関連で試してみた記事をまとめました。
Tips付きのものだけ列挙してます。
(JavaScriptだけのものも含む)

• [web関連]jQueryを使用してメニュー上の現在地をハイライトする[備忘録] 
• [web関連] おみくじ作ってみた [JavaScript] 
• [web関連] Masonry使ってみた [テスト]
• [web関連] とりパズル作ってみた。 [暇つぶし]
• [web関連]IntroTzikas.js試してみた。