グローバルナビもサイドナビも自動的に現在地表示します。
ヘッダーで、jquery.jsとjquery.url.js後述のcurrent.jsを読み込んでいます。
参考サイト
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.url.js"></script> <script type="text/javascript" src="js/current.js"></script>
[current.js]JavaScript
// Globalnav current $(function(){ var url = $.url(); $dire = url.segment(4); //どこの階層で判定? //alert($dire); if(!$dire) { $dire = 'index.html'; } $('.mod_Gnavi ul li img').each(function () { var $key = $(this).parent('a').attr('id'); var onMenu = $(this).attr('src').replace('_off.', '_on.'); var ofMenu = $(this).attr('src').replace('_on.', '_off.'); //top if($dire == 'index.html'){$('a#home img').attr('src', 'img/nav01_on.jpg');} //下層 if (($key == $dire) || ($key == '')) { $(this).attr('src', onMenu); } else { $(this).attr('src', ofMenu); } }); }); // Sidenav current $(function(){ var url = $.url(); $page = url.attr('file'); //alert($page); if(!$page) { $page = 'index.html'; } $('.mod_sidenav ul li a').each(function(){ var $href = $(this).attr('href'); if ( ($href == $page) || ($href == '') ) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); });
HTMl
<div class="mod_Gnavi"> <ul class="ex_clearfix"> <li><a id="home" href="../index.html"><img src="../img/nav01_off.jpg" width="150" height="45" alt="Menu01" /></a></li> <li><a id="corp" href="index.html"><img src="../img/nav02_off.jpg" width="149" height="45" alt="Menu02" /></a></li> <li><a id="service" href="../service/index.html"><img src="../img/nav03_off.jpg" width="149" height="45" alt="Menu03" /></a></li> <li><a id="faq" href="../faq/index.html"><img src="../img/nav04_off.jpg" width="149" height="45" alt="Menu04" /></a></li> </ul> <!--mod_Gnavi_end --></div> <p> </p> <div class="mod_sidenav"> <ul> <li><a href="index.html">indexメニュー</a></li> <li><a href="001.html">001メニュー</a></li> <li><a href="002.html">002メニュー</a></li> <li><a href="003.html">003メニュー</a></li> <li><a href="004.html">004メニュー</a></li> <li><a href="005.html">005メニュー</a></li> </ul> <!-- mod_sidenav_end --></div>
CSS
/* GlobalNavi -----------------------------------------*/ .mod_Gnavi ul{ width:600px; } .mod_Gnavi ul li{ width:150px; height:45px; float:left; } .mod_Gnavi ul li a{ display:block; } /* Sidenav -----------------------------------------*/ .mod_sidenav{ width:150px; } .mod_sidenav ul{ border:solid 1px #CCC; border-bottom:none; } .mod_sidenav ul li{ border-bottom:solid 1px #CCC; } .mod_sidenav ul li a{ padding:5px 5px 5px 20px; display:block; background:transparent url('img/Sidemenu_001.gif') no-repeat 5px 45% scroll; } .mod_sidenav ul li a:link {color:#666; text-decoration:none;} .mod_sidenav ul li a:visited {color:#666; text-decoration:none;} .mod_sidenav ul li a:hover {color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif');} .mod_sidenav ul li a:active {color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif');} /* current */ .mod_sidenav ul li a.active{ color:#666; background-color:#EEE;background-image: url('img/Sidemenu_001_over.gif'); }