Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

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

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を修正する必要が無くなり、グローバルナビをインクルードするだけで管理がすごく楽になります。

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

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

「jQuery」の他の記事を読む

ひよこさん さん

2011年1月17日

$(“nav li.about a img”)

navの#がぬけておりまするかも。。。

admin さん

2011年1月17日

>ひよこさん
ご指摘ありがとうございます。早速修正させて頂きました。

369 さん

2011年8月11日

javascript初心者です。横一枚のナビゲーションが像を使用してCSSでロールオーバーしアクティブまで動きをつけた場合、表示画面の箇所をアクティブにさせる画像の指定方法ってありますか?

admin さん

2011年8月31日

>369さん
コメントありがとうございます。
お返事が遅くなり大変申し訳ありません。
ご想定されている内容ですが、下記のような考え方で実現できるのはないかと思います。

・ナビそれぞれにclass=”active”用のCSSを用意
(.activeに背景のポジションを指定)

おそらくjavascriptは下記のような感じ
if(path.match(“/about/”)){
$(“#nav li.about”).addClass(“active”);

/about/の場合、li.aboutにさらに.activeを付加する、といった処理ですね。

ご参考になれば幸いです。

この記事にコメントする

必須
必須
本文必須

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

ページの先頭に戻る