<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ツリーメニュー（2 段階）</title>
<script type="text/javascript">
function subopen (tName) {
var tMenu = subopen.get (tName).style;
if (tName.substring (0, 3) != "sub") {
with (subopen) {
if (chMenu) chMenu.display = "none";
if (subMenu) { subMenu.display = "none"; subMenu = null; }
if (chMenu == tMenu) chMenu = null;
else { chMenu = tMenu; tMenu.display = "block"; }
}
} else {
with (subopen) {
if (subMenu) subMenu.display = "none";
if (subMenu == tMenu) subMenu = null;
else { subMenu = tMenu; tMenu.display = "block"; }
}
}
return false;
}
subopen.chMenu = null;
subopen.subMenu = null;
subopen.get = (document.getElementById)
? function (id) {
return document.getElementById (id);
}
: function (id) {
return document.all (id);
}
// スクリプトが動作する場合のみスタイル適用
subopen.init = function () {
document.write ('\u003Cstyle type="text/css">.sub { display: none; }\u003C/style>');
}
subopen.init ();
</script>
<h1>ツリーメニュー展開</h1>
<ul>
<li><a href="#" onclick="return subopen ('menu1');" onkeyup="return this.onclick ();">メニュー</a>
<ul id="menu1" class="sub">
<li><a href="#" onclick="return subopen ('submenu1_1');" onkeyup="return this.onclick ();">子メニュー1</a>
<ul id="submenu1_1">
<li>S リンク I</li>
<li>S リンク II</li>
</ul>
</li>
<li><a href="#" onclick="return subopen ('submenu1_2');" onkeyup="return this.onclick ();">子メニュー2</a>
<ul id="submenu1_2">
<li>S リンク I</li>
<li>S リンク II</li>
</ul>
</li>
</ul>
</li>
</ul>
<html><head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>ツリーメニューⅡ（2段階）</TITLE>
<style type=text/css><!--
.sub div{display:none;}
--></style>
<script language=JavaScript ><!--
chMenu=0;subMenu=0;
function subopen(tName){
tMenu=(document.all)?document.all(tName).style:document.getElementById(tName).style;
if(tName.substring(0, 3)!="sub"){
if(chMenu)chMenu.display="none";
if(subMenu){subMenu.display="none";subMenu=0;}
if(chMenu==tMenu){chMenu=0;}
else{chMenu=tMenu;
tMenu.display="block";}
}else{
if(subMenu)subMenu.display="none";
if(subMenu==tMenu){subMenu=0;}
else{subMenu=tMenu;
tMenu.display="block";}
}
}/* himajin.moo.jp */
// --></script>
</head>
<BODY>
<table><tr><td width=200 valign=top >
<br><br>
<table cellspacing=0 cellpadding=0>
<tr><td class="main" onClick="subopen('menu1')">メニュー
</td></tr><tr>
<td class="sub"><div ID="menu1">
<a href="JavaScript:subopen('submenu1_1')">子メニュー1</a><BR>
<div ID="submenu1_1">
<LI>SリンクⅠ<BR>
<LI>SリンクⅡ<BR>
</div>
<a href="JavaScript:subopen('submenu1_2')">子メニュー2</a><BR>
<div ID="submenu1_2">
<LI>SリンクⅠ<BR>
<LI>SリンクⅡ<BR>
</div>
<a href="JavaScript:subopen('submenu1_3')">子メニュー3</a><BR>
<div ID="submenu1_3">
<LI>SリンクⅠ<BR>
<LI>SリンクⅡ<BR>
</div>
<a href="JavaScript:subopen('submenu1_4')">子メニュー4</a><BR>
<div ID="submenu1_4">
<LI>SリンクⅠ<BR>
<LI>SリンクⅡ<BR>
</div>
</div></td></tr></table>
</body>
</html>