TOP /すぐに使えるJavaScript ツリーメニューⅡ（2段階）


JavaScript
HTML 


<style type=text/css><!--
/*メニューのスタイル*/
td.main{
width:100px; 
background-color:#6688ff;
color:#ffffff;
font: bold 12pt Times New Roman;
text-indent:5px;
cursor:hand;
}
/*サブメニューのスタイル*/
td.sub{
/*border:#6688ff solid 1px;*/
background-color:#ffffff;
font-size:10pt;
position:relative;
left:10px;
}
.sub div{display:none;}
/*リンクのスタイル*/
.sub div A:link{text-decoration:none;width:100%;color:#6688ff;display:block;}
.sub div A:visited{text-decoration:none;width:100%;color:#6688ff;display:block;}
.sub div A:hover{
  color:#ffffff;text-decoration:none;width:100%;
  background-color:#33ccff;display:block;}

--></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>

----ここから（1段）-----
<table cellspacing=0 cellpadding=0>
<tr><td class="main" onClick="subopen('menu1')">JavaScript
</td></tr><tr>
<td class="sub"><div ID="menu1">
<a href="リンク先アドレス">リンクⅠ</a>
<a href="リンク先アドレス">リンクⅡ</a>
                ----1段目のリンクの数だけ上の行をコピー-----
      ----ここから（2段）-----2段目のIDはsub文字列とする
<a href="JavaScript:subopen('submenu1_1')">子メニューⅠ</a>
  <div ID="submenu1_1">
<a href="リンク先アドレス">リンクⅠ</a>
<a href="リンク先アドレス">リンクⅡ</a>
                ----2段目のリンクの数だけ上の行をコピー-----
  </div>
      ----ここまでをメニューの数だけコピー（2段）-----

</div></td></tr></table>
----ここまでをメニューの数だけコピー（1段）-----
<table cellspacing=0 cellpadding=0>
<tr><td class="main" onClick="subopen('menu2')">HTML
</td></tr><tr>
<td class="sub"><div ID="menu2">
<a href="リンク先アドレス">リンクⅠ</a>
<a href="リンク先アドレス">リンクⅡ</a>

</div></td></tr></table>