自閉式ツリーメニュー
今回は自動的に閉じるツリーメニューです。
下の例のどれかを開いておき、新たに別のどれかを開くと既に開いてあったメニューは
自動的に閉じます。（各ページのリンク先はありません）
ツリーメニューを作動させるための JavaScript と CSS（スタイルシート）の部分です。
<head>〜</head>の中に置いてください。
このスクリプトはDOM Level 1
準拠ですので、どのブラウザでも動作するはずです。
実はこれ、メニュー付き疑似インラインフレーム
で作った dmenu(menu_class,menu_id) に少し手を加えただけのもので、
開いている部分をクリックする事で閉じるように改造しました。
2007/01/13 入れ子にして使う場合も問題無く動作するよう変更しました。
<script type="text/javascript"><!--
function tree2(menu_class,menu_id) {
var div=document.getElementById(menu_id);
if (div.style.display == "block") div.style.display="none";
else {
var sib=div.parentNode.childNodes;
for (var i=0; i < sib.length; i++)
if (sib[i].className == menu_class)
sib[i].style.display="none";
div.style.display="block";
}
}
// --></script>
<style type="text/css"><!--
.tree { display:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
--></style>
連動させるツリーメニューに全て同じクラス名を設定し、
javascript:tree2('クラス名','idの値')でリンクします。
また、CSSの部分では、このクラス名をクラスセレクタ（この例では .tree）として
利用し、display:none; とスタイル規則で初期状態を非表示にしています。
idやクラス名(class属性値)に使用する文字は半角で、頭文字は必ずアルファベットから
始め、数字・アルファベット・ハイフン・アンダースコア・コロン・ピリオドの何れかの
組合せにしないといけません。また、idは重複しないよう注意してください。
<a href="javascript:tree2('
tree','
menu1');"
title="クリック！">クリック１</a><br>
<div class="
tree"
id="
menu1">
├<a href="未設定" title="作成中です"
target="未定">妖しいページ</a><br>
└<a href="未設定" title="教えられません"
target="未定">秘密のページ</a><br>
</div>
<a href="javascript:tree2('
tree','
menu2');"
title="クリック！">クリック２</a><br>
<div class="
tree" id="
menu2">
├<a href="未設定" title="忘れました"
target="未定">アホなページ</a><br>
├<a href="未設定" title="ぶっ飛びました"
target="未定">ハイなページ</a><br>
└<a href="未設定" title="公開できません"
target="未定">シャイなページ</a><br>
</div>
<a href="javascript:tree2('
tree','
menu3');"
title="クリック！">クリック３</a><br>
<div class="
tree" id="
menu3">
├<a href="未設定" title="封印されました"
target="未定">邪悪なページ</a><br>
└<a href="未設定" title="実在しません"
target="未定">幻のページ</a><br>
</div>