グローバルナビゲーションのカテゴリを自動でアクティブにする

jQuery2010年8月3日

グローバルナビゲーションのカテゴリを自動でハイライトするスクリプトをご紹介します。jQueryで容易に実装することが可能です。
下記、実装サンプルのスクリプトになります。

HTML

<ul id="nav">
<li class="about"><a href="/about/"><img src="nav-01.gif" alt="" /></a></li>
<li class="company"><a href="/company/"><img src="nav-02.gif" alt="" /></a></li>
<li class="product"><a href="/product/"><img src="nav-03.gif" alt="" /></a></li>
<li class="work"><a href="/work/"><img src="nav-04.gif" alt="" /></a></li>
<li class="contact"><a href="/contact/"><img src="nav-05.gif" alt="" /></a></li>
</ul>

Javascript

$(document).ready(function(){
　　path = location.pathname
　　	if(path.match("/about/")){
$("#nav li.about a img").attr("src", "nav-01_over.gif");
　　	}
if(path.match("/company/")){
$("#nav li.company a img").attr("src", "nav-02_over.gif");
　　	}
if(path.match("/product/")){
$("#nav li.product a img").attr("src", "nav-03_over.gif");
　　	}
if(path.match("/work/")){
$("#nav li.work a img").attr("src", "nav-04_over.gif");
　　	}
if(path.match("/contact/")){
$("#nav li.contact a img").attr("src", "nav-05_over.gif");
　　	}
})

例えば表示したURLの中に「/about/」がある場合、「about」というクラス名を付与されたli要素の中の画像を指定した画像に置き換える、ということをやっています。
上記のスクリプトの欠点としては、もしもグローバルナビの数やURLに変更があった場合に、Javascriptを修正しなければならないという点がありますが、グローバルナビというのはそうそう変わるものでもないですし、とりあえず上記のスクリプトで機能は実現できているので良しとします。
この機能を実装することで各カテゴリごとにHTMLを修正する必要が無くなり、グローバルナビをインクルードするだけで管理がすごく楽になります。

• ※本当はロールオーバーも含めたスクリプトとしてご紹介したいのですが、あまり完璧に載せると所属している会社がバレそうな可能性があるためやめておきます。ご了承ください。

• 順序付きリスト[Ordered List]の昇降を逆にする
• jQueryでタブメニューを実装（テキストメニュー版）

この記事を読んでいる方にオススメの記事

• jQueryjQueryでタブメニューを実装（画像メニュー版）
• jQueryjQueryで画像のロールオーバーを実装
• jQueryjQueryでオリジナルツールチップを使用する
• jQueryjQueryで印刷用ページを展開する
• jQueryはじめてのjQuery
• jQueryjQueryでテーブルをラジオボタンでソート（プラグインなし）

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。