Tree Menu
Description:
ツリー状のメニューを表示します。
ツリーのタイトルをクリックするとどんどん展開して行きます。
また、もう一度クリックすると今度は閉じます。
対応ブラウザ以外では全ツリーが展開された状態で表示されます。
Demo:
Source:
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
if(document.all || document.getElementById) {
var treemenu_defaultdisplay = "none"; //デフォルトのスタイル。none/block
document.write("<style type=\"text/css\" id=\"treemenu\">");
document.write(".treedisp { display:" +treemenu_defaultdisplay+ "; }");
document.write("<\/style>");
}
function treemenu(id) {
if(!document.getElementById && !document.all) { return; }
var el = (document.getElementById) ? document.getElementById(id) : document.all(id);
var disp = (el.style.display == "") ? treemenu_defaultdisplay : el.style.display;
if(disp != "none") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
//-->
</script>
</head>
<body>
<!-- 各ツリーの親要素に onclick="treemenu()" を書く。 -->
<span onclick="treemenu('tree-category');"><b>Tree Menu</b></span>
<ul id="tree-category" class="treedisp"><!-- 可視・不可視を切りかえる要素に ID と class="treedisp" を指定する -->
<li><span onclick="treemenu('tree-search')">Search Engine</span>
<ul id="tree-search" class="treedisp">
<li><a href="http://www.yahoo.co.jp/">Yahoo</a>
<li><a href="http://www.excite.co.jp/">Excite</a>
<li><a href="http://www.infoseek.co.jp/">infoseek</a>
</ul>
<li><span onclick="treemenu('tree-vender')">Vender</span>
<ul id="tree-vender" class="treedisp">
<li><a href="http://www.microsoft.com/japan/">Microsoft</a>
<li><a href="http://www.apple.co.jp/">Apple</a>
</ul>
</ul>
</body>
</html>
Advice:
(*1) 詳細
onclick="treemenu('ID');"
は、idで指定された名前のタグの可視・不可視を切り替えます。
例えば、
<ul id="test" style="display:none">...</ul>
というリストに対して行いたい場合は、そのリストのタイトルに当る部分のタグの中に、
onClick="treemenu('test') と記述します。
id は好きな文字を指定できます。
Arrangement:
Browser:
Internet Explorer4.0以上
Netscape Navigator6.0以上