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】ナビゲーションでの現在位置


