フォームではなく、文字で表示するポップアップメニューです。
文字の左にある▼をクリックするとメニューが表示されます。
開いてるメニューを閉じる場合は、もう一度▼をクリックします。
このサンプルではツリーの中に子ツリーを作成できます。
ただしIE4.x以降限定です。他のブラウザでは動きません。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
・補足解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
taihi=new Array();
function hyouji(doko)
{
if(document.all)
{
lay_name=document.all(doko);
if(lay_name.style.visibility == 'visible')
{
lay_name.style.visibility='hidden';
lay_name.style.display="none";
if(navigator.appVersion.indexOf("MSIE 4.") != -1)
lay_name.innerHTML=taihi[doko];
}
else
{
lay_name=document.all(doko);
lay_name.style.visibility='visible';
lay_name.style.display="block";
taihi[doko]=lay_name.innerHTML;
if(navigator.appVersion.indexOf("MSIE 4.") != -1)
lay_name.innerHTML="<br>"+taihi[doko];
}
}
}
if(document.all)
{document.write('<style type="text/css">span{position:relative;display:none;}div{position:relative;visibility:visible;}</style>');}
//-->
</script>
</head>
<body>
<div id="title0_0">
<a href="JavaScript:hyouji('lay0_0');">▼</a>Front
</div>
<span id="lay0_0"><dl><dd>
<a href="JavaScript:hyouji('lay0_0_0');">▼</a>Front1<br>
<span id="lay0_0_0"><dl><dd>
<a href="JavaScript:hyouji('lay0_0_0_0');">▼</a>Front11<br>
<span id="lay0_0_0_0">
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ2</a><br>
</span>
<a href="JavaScript:hyouji('lay0_0_0_1');">▼</a>Front12<br>
<span id="lay0_0_0_1">
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
</span>
<a href="JavaScript:hyouji('lay0_0_0_2');">▼</a>Front13<br>
<span id="lay0_0_0_2">
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
</span></dd></dl>
</span>
<a href="JavaScript:hyouji('lay0_0_1');">▼</a>Front2<br>
<span id="lay0_0_1">
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
</span>
<a href="JavaScript:hyouji('lay0_0_2');">▼</a>Front3<br>
<span id="lay0_0_2">
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
</span></dd></dl>
</span>
<div id="title1_0">
<a href="JavaScript:hyouji('lay1_0');">▼</a>Contents
</div>
<span id="lay1_0">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)2</a><br>
</span>
<p><br></p><p><br></p><p><br></p><br>
<div id="title2_0">
<a href="JavaScript:hyouji('lay2_0');">▼</a>Communication
</div>
<span id="lay2_0"><dl><dd>
<a href="JavaScript:hyouji('lay2_0_0');">▼</a>Contents1<br>
<span id="lay2_0_0">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)2</a><br>
</span>
<a href="JavaScript:hyouji('lay2_0_1');">▼</a>Contents2<br>
<span id="lay2_0_1">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)2</a><br>
</span>
<a href="JavaScript:hyouji('lay2_0_2');">▼</a>Contents3<br>
<span id="lay2_0_2">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)2</a><br>
</span></dd></dl>
</span>
<p><br></p><p><br></p><p><br></p><br>
<div id="title3_0">
<a href="JavaScript:hyouji('3_0');">▼</a>Contents
</div>
<span id="lay3_0">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../lib_link.html">Library(Link)2</a><br>
</span>
</body></html>
[ 解説 ]
このスクリプトでは、各ツリーの名前(ID)の付け方が異なります。
サンプルでは、「Front」と言う親ツリーの下に、「Front1」、「Front2」、「Front3」と言う子供ツリーがあります。
更に子供ツリー「Front1」は、「Front11」、「Front12」、「Front13」と言う孫ツリーを持っています。
一つ一つの名前を見ますと、
| ツリー名称 | ツリーID |
| Front | lay0_0 |
| Front1 | lay0_0_0 |
| Front2 | lay0_0_1 |
| Front3 | lay0_0_2 |
| Front11 | lay0_0_0_0 |
| Front12 | lay0_0_0_1 |
| Front13 | lay0_0_0_2 |
となっています。
これを、親子孫の関係で書きますと、
| Front | lay0_0 |
| Front1 | lay0_0_0 |
| | Front11 | lay0_0_0_0 |
| | Front12 | lay0_0_0_1 |
| | Front13 | lay0_0_0_2 |
| Front2 | lay0_0_1 |
| Front3 | lay0_0_2 |
となります。
ID「lay0_0」の子ツリーは、必ず親IDを自分のIDの先頭に含んでいます。
親ツリー「Front」のIDは「lay0_0」です。
従って、「Front」の子ツリー「Front1」のIDは、「lay0_0」を含む「lay0_0_0」に、
「Front」の子ツリー「Front2」のIDは、「lay0_0」を含む「lay0_0_1」に、
「Front」の子ツリー「Front3」のIDは、「lay0_0」を含む「lay0_0_2」に
なります。
複数階層を利用する際は、この法則性を守って各ツリーのIDを決定して下さい。
また、各ツリーのIDを記入する箇所は、スクリプト内に2カ所ありますので、
IDを変更した際は、必ず2カ所のIDを変更して下さい。
|
