html+cssの準備
たとえばこんなファイル構成だったとします。
リストでマークアップするとこんな感じになるんじゃないかな。
html
<ul id="side-nav"> <li><a href="01.html">メニュー1</a></li> <li><a href="02.html">メニュー2</a></li> <li> <a href="03.html">メニュー3</a> <ul id="sub01"> <li><a href="sub01/01.html">サブメニュー1</a></li> <li><a href="sub01/02.html">サブメニュー2</a></li> <li><a href="sub01/03.html">サブメニュー3</a></li> </ul> </li> <li> <a href="04.html">メニュー4</a> <ul id="sub02"> <li><a href="sub02/01.html">サブメニュー1</a></li> <li><a href="sub02/02.html">サブメニュー2</a></li> <li><a href="sub02/03.html">サブメニュー3</a></li> </ul> </li> </ul>
かなり効率悪いで、子メニューのあるulにはidにディレクトリ名を指定しなくてはいけません。
css
ul ul { display: none; } ul ul.active { display: block; }
子メニューのulは「display: none」で消しときます。
あとでjavascriptでクラスに「active」を指定すれば表示できる寸法。
サブメニューを開いた状態にするjavascript
javascriptでは現在のページの親ディレクトリを取得して、正規表現であらかじめ指定しておいたディレクトリ名のidとマッチさせ置き換えます。
javascript
$(function() { //現在のURLを配列で取得 var now = location.href.split('/'); //親のディレクトリ取得 var dir = now.slice(now.length-2,now.length-1); var reg = new RegExp('(id=¥"'+dir+'¥"|id='+dir+')'); $('#side-nav').each(function(){ var txt = $(this).html(); $(this).html( txt.replace(reg,'$1 class=¥"active¥"') ); }); });
※¥の部分は打ち直さないと実行できないかもしれません。
- 【3~5行目】
- コメントの通りですが、現在のURLを取得して最後から2番目の配列を取得することで、親ディレクトリの文字列を取得しています。
- 【6行目】
-
正規表現です。変数を正規表現に入れる場合はRegExpオブジェクトを使用する必要があるようです。
注意点としてはieの場合「""」が外れて「id=sub01」となるので2つ検索しています。 - 【7~12行目】
-
ここで置き換え処理をしています。
マッチしたidがあったら「class="active"」を追加しています。
サブメニューのあるサイドメニューはアコーディオンを使用する方法が基本だと思いますが、アコーディオンにすると親のボタンが使用できなくなるので、それではまずいといったケースだったら使用できるのではないかと思います。
でも、もっと良い方法があると思います……。
参考サイト
【jQuery】ナビゲーションでの現在位置