| 解 説 |
ツリーメニュー（Explorerのような階層表示型メニュー）はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。ツリーメニューのスクリプトは２行でできます。現在の状態がどうなっているかをチェックして表示を切り替えます。表示されていればスタイルシートのdisplayプロパティにblock、そうでなければnoneの文字が入っています。displayならnoneに、noneならdisplayにします。通常はif命令を使いますが、表示状態をあらかじめ配列に格納しておき状態を検索し、その結果を配列の引数とすることで短くシンプルなスクリプトとなります。
|
| コード |
<![CDATA[
<html>
<head>
<title>ツリーメニュー（フラット）</title>
<script language="JavaScript"><!--
vType = ["none","block"];
function treeMenu(tName)
{
tMenu = document.all[tName].style;
tMenu.display = vType[tMenu.display.indexOf("none") + 1];
}
// --></script>
</head>
<body>
<a href="javaScript:treeMenu('treeMenu')">＋</a>■リンク<br>
<div id="treeMenu" style="display:none">
├<a href="http://www.impress.co.jp/">インプレス</a><br>
├<a href="http://www.openspc2.org/" >OpenSpace</a><br>
└<a href="http://game.gr.jp/" >NewGameWeb</a><br>
</div>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
ツリーメニュー（フラット）