ユージック

メニューで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のみです。

注意事項

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

Tweet

Related entries