| ポイント |
<![CDATA[
for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none";
]]>
|
| 説 明 |
ツリーメニュー（Explorerのような階層表示型メニュー）はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。複数のツリーメニューにする場合はdivタグのid名が同じにならないように気を付けてください。また、<a href="javaScript:exMenu('treeMenu1')">でtreeMenu1となっている部分のidが正しくdivタグで指定したidと対応するようにしてください。
複数のツリーメニューがあり、１つだけを展開し後はたたんで表示したい場合には、あらかじめツリーメニューのID名を配列に入れておきます。その配列の数だけツリーメニューのIDを読み出し、表示しない設定にします。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックするとツリーメニューを表示する（１つだけ展開し後はたたむ）</title>
<script Language="JavaScript"><!--
trList = ["treeMenu1","treeMenu2","treeMenu3"]; // ツリーメニューのリスト
function exMenu(tName)
{
for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none";
tMenu = eval(tName).style;
if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none";
}
// --></script>
</head>
<body bgcolor="white">
<a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br>
<div id="treeMenu1" style="display:none">
├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
├<a href="http://www.goo.ne.jp/" >Goo</a><br>
└<a href="http://www.lycos.co.jp/">Lycos</a><br>
</div>
<a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br>
<div id="treeMenu2" style="display:none">
├<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
├<a href="http://www.google.com/" >Google</a><br>
└<a href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
<a href="javaScript:exMenu('treeMenu3')">＋</a>■検索サイト３<br>
<div id="treeMenu3" style="display:none">
├<a href="http://www.excite.co.jp/">Excite</a><br>
└<a href="http://www.msn.com/" >MSN</a><br>
</div>
</body>
</html>
]]>
|
| 補足説明 |
MacOS X + SafariおよびiCabでも動作します。Opera 6では動作しません。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックするとツリーメニューを表示する（１つだけ展開し後はたたむ）