メニューで現在位置を表示するJSライブラリ

2007年9月17日

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

注意事項

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