メニューで現在位置を表示するJSライブラリ : ユージック

メニューでjavascriptのみで現在位置を表示するJSライブラリをご紹介します。

どういったものかというと、マークアップでメニューに各ページごとにIDやクラスをふらなくても現在のページをハイライトするという機能です。

イメージをCSSで背景にしいて使用する場合は、アンカータグに"here"というclassをつけるという仕組みを利用し、CSSを使わずimgタグでメニューを組む場合は命名規則として、menu_on menu_offといったように通常時に_offとハイライト時に_onとつけてください。src属性にアクセスしてoffとonを置換する仕組みを利用しています。

imgタグをCSSでaタグの背景にしいて利用する場合のHTMLとJavascriptのコード

HTML

<ul id="menu">
<li><a href="index.html">ホーム</a></li>
<li><a href="menu1.html">メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a></li>
<li><a href="menu3.html">メニュー3</a></li>
</ul>

JSコード

function highlightpage(){
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("menu")) return false;
	var nav = document.getElementById("menu");
	var links = nav.getElementsByTagName("a");
	
	for(var i=0; i<links.length; i++){
            var linkurl = links[i].getAttribute("href");
	    var currenturl = window.location.href;
		if(currenturl.indexOf(linkurl) != -1){
		 links[i].className = "here";		
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", highlightpage, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", highlightpage);
}

imgタグを利用する場合のHTMLとJavascriptのコード

HTML

<ul id="menu">
<li><a href="index.html"><img src="images/menu1_off.gif" alt="ホーム" /></a></li>
<li><a href="menu1.html"><img src="images/menu2_off.gif" alt="メニュー1" /></a></li>
<li><a href="menu2.html"><img src="images/menu3_off.gif" alt="メニュー2" /></a></li>
<li><a href="menu3.html"><img src="images/menu4_off.gif" alt="メニュー3" /></a></li>
</ul>

JSコード

function highlightpage(){
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("menu")) return false;
	var nav = document.getElementById("menu");
	var links = nav.getElementsByTagName("a");
	
	for(var i=0; i<links.length; i++){
		var linkurl = links[i].getAttribute("href");
		var currenturl = window.location.href;
		if(currenturl.indexOf(linkurl) != -1){
			var linkimages = links[i].getElementsByTagName("img")[0]
			var src_replace = linkimages.getAttribute("src").replace("_off.", "_on.");
			linkimages.setAttribute("src",src_replace);
				
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", highlightpage, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", highlightpage);
}

動作確認はWinのIE6、IE7、FireFoxのみです。

注意事項

改変、改良は自由です。
これを使用して問題が発生しても責任は負いません。
利用はご自由にどうぞ

Coments

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント: (スタイル用のHTMLタグが使えます)

初めまして。始めてコメントさせていただきます。
よろしくお願いします。
リストにイメージをCSSで背景にしいて使用していて、その背景を変えようと思ったんです。

見よう見真似で、こんな感じで変えてみたんです。
var links = nav.getElementsByTagName("a");
var cr=nav.getElementsByTagName("li");
for(var i=0; i var linkurl = links[i].getAttribute("href");
var crurl=cr[i]
var currenturl = window.location.href;
if(currenturl.indexOf(linkurl) != -1){
cr[i].className = "here";
}
}
FireFoxとIE7はうまくいったのですが、
するとIE6だけaタグに適用されてしまって・・・。

お知恵をお貸しください。

投稿者: ひいご | 2007年11月13日 11:14

こんにちは。この仕掛け、includeでメニューを組み込むときにincludeされるファイルを増やさずに済むので、非常に便利ですね。参考にさせていただきます。

ところで、各JSの冒頭エラーチェックが「return fales;」になってますが、これfalseの間違いではないでしょうか。ご確認ください。

投稿者: mucho | 2008年4月20日 16:49

ひいごさん＞
返事遅くてすいません。
links[i]の変数のiをｊとか違うのに変えてみたらどうだろう。。
違うよなぁ。。すいません！

muchoさん＞
はじめまして。仕事柄インクルードされたお決まりのHTMLを使う事が多いのでこういったインクルードされたコードで自由度を利かすJSを試行錯誤しております。
ご指摘のとおりfalesっておもっきり間違えてました。
訂正しました。ありがとう！

投稿者: u-ziq | 2008年4月21日 23:48

▲TOP

ユージック