TOP /すぐに使えるJavaScript ツリーメニュー(IE限定)IE以外は初めから全て展開


MENU T
TOP
リンク U
リンク V
リンク W
MENU U
リンク T
リンク U
リンク V
リンク W
MENU V
リンク T
リンク U

<style type=text/css><!--
/*メニューのスタイル*/
td.main{
width:100px; 
background-color:#6688ff;
color:#ffffff;
font: bold 12pt Times New Roman;
text-indent:5px;
cursor:hand;
}

/*サブメニューのスタイル*/
.menu tr td{
border:#6688ff solid 1px;
background-color:#ffffff;
font-size:10pt;
text-indent:2px;
position:relative;
left:10px;
}

/*リンクのスタイル*/
.menu A:link{text-decoration:none;width:100%;color:#6688ff;display:block;}
.menu A:visited{text-decoration:none;width:100%;color:#6688ff;display:block;}
.menu A:hover{
  text-decoration:none;width:100%;color:#ffffff;
  background-color:#33ccff;display:block;}

--></style>
<script language="JavaScript"><!--
if(document.all){
document.write("<style type=text/css><!--.menu tr{display:none;}--></style>");}
mc=0;hmc=0;var hmenu;
function menuopen(tb){
if(!document.all)return;
mc=0;hmc=0;
menuobj=document.all(tb);
if(hmenu){hmc=hmenu.rows.length;}
subclose();
}
function subopen(){
if(mc<menuobj.rows.length){
menuobj.rows[mc].style.display="block";
mc++;
setTimeout("subopen()", 80);
}
}
function subclose(){
if(hmc>0){
hmenu.rows[hmc-1].style.display="none";
hmc--;
setTimeout("subclose()", 40);
}else{
if(hmenu!=menuobj)subopen();
(hmenu==menuobj)?hmenu="":hmenu=menuobj;}
}/*himajin.moo.jp*/
// --></script>
----ここから-----
<table>
<thead>
<tr><td onClick="menuopen('menu1')"class="main">MENU T</td></tr>
</thead>
<tbody id="menu1"class="menu">
<tr><td><a href="../index.html"title="HIMAJINのトップページ">TOP</a></td></tr>
<tr><td><a href="リンク先アドレス"title="説明">リンクU</a></td></tr>
<tr><td><a href="リンク先アドレス"title="説明">リンクV</a></td></tr>
<tr><td><a href="リンク先アドレス"title="説明">リンクW</a></td></tr>
                ----リンクの数だけ上の行をコピー-----
</tbody>
</table>
----ここまでをメニューの数だけコピー-----
<table>
<thead>
<tr><td onClick="menuopen('menu2')"class="main">MENU U</td></tr>
</thead>
<tbody id="menu2"class="menu">
<tr><td>リンク T</td></tr>
<tr><td>リンク U</td></tr>
<tr><td>リンク V</td></tr>
<tr><td>リンク W</td></tr>
</tbody>
</table>
<table>
<thead>
<tr><td onClick="menuopen('menu3')"class="main">MENU V</td></tr>
</thead>
<tbody id="menu3"class="menu">
<tr><td>リンク T</td></tr>
<tr><td>リンク U</td></tr>
</tbody>
</table>