[ プログラミング ] 現在のページのメニュー画像をハイライトする

jQueryを利用して、グローバルメニューの現在のリンクメニューの部分にCSSのclassを加えてハイライトにする方法です。

DOMO

HTML

<div id="menuWrap">
<ul class="menu">
   <li><a href="/" class="home">HOME</a></li>
   <li><a href="index.html">最新情報</a></li>
   <li><a href="business/">事業内容</a></li>
   <li><a href="company/index.html">会社概要</a></li>
   <li><a href="recruit.html">採用情報</a></li>
   <li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>

CSS

#menuWrap {
   width:100%;
   margin:0 auto;
   background:url(images/bg.gif) 0 0 repeat-x;
}
.menu {
   width:722px;
   overflow:hidden;
   margin:0 auto;
   font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
   padding-left:2px;
   list-style-type:none;
   background:url(images/bg_list_left.gif) 0 0 no-repeat;
}

.menu li {
   float:left;
   font-size:0.75em;
   color:#333;
}

.menu li a {
   display:block;
   width:120px;
   color:#fff;
   padding:20px 0;
   line-height:1.2;
   text-align:center;
   text-decoration:none;
   background:url(images/bg_list.gif) 100% 0 no-repeat;
}

.menu li a.current {
   background:url(images/bg_list_on.gif) 100% 0 no-repeat;
}

.menu li a:hover {
   background:url(images/bg_list_on.gif) 100% 0 no-repeat;
}

Java Script

$(function(){
   $('.menu li a').each(function(){
      // リンク先のURLを取得
      var url = $(this).attr('href');
      // 現在表示されているページのURLを取得し、リンク先のURLと照合
      if(location.href.match(url)) {
         // マッチすれば、「class="current"」を付加
         $(this).addClass('current');
         // マッチしなければ、「class="current"」を削除
      } else {
         $(this).removeClass('current');
      }
   });
});

ここで注意しなければならないのは、現在のページの表示が例えば、「linkCurrent/」の場合と「linkCurrent/index.html」の場合で挙動が異なるということです。現在のページを「linkCurrent/」でアクセスしていた場合、上記の「最新情報」のところはハイライトされませんが、「linkCurrent/index.html」でアクセスしていた場合はハイライトされます。逆に現在表示しているページのindex.htmlのあるなしに関わらず、「/」でリンクしているメニューはハイライトされます。

参考サイト

参考というか、そのままのソースコードになってしまいましたが、色々と参考にした中で一番シンプルでわかりやすかったです。ありがとうございます。

jQueryライブラリ「yuga.js」

Webサイトを制作する上で必要な機能がまとまったyuga.jsというjQueryライブラリがあるのですが、その中のひとつに、現在のページをハイライト表示する機能があります。このライブラリも、index.htmlのあるなしで挙動が変わってしまうようですね。