TOP /すぐに使えるJavaScript ツリーメニューⅡ（スタイルシート）


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:pointer;
}
/*サブメニューのスタイル*/
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;
function subopen(tName){
tMenu=(document.all)?document.all(tName).style:document.getElementById(tName).style;
if(chMenu)chMenu.display="none";
if(chMenu==tMenu){chMenu=0;
}else{chMenu=tMenu;
tMenu.display="block";}
}/* himajin.moo.jp */
// --></script>
----ここから-----
<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>
                ----リンクの数だけ上の行をコピー-----
</div></td></tr></table>
----ここまでをメニューの数だけコピー-----
<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>