フォームではなく、文字で表示するポップアップメニューです。
文字の左にある▼をクリックするとメニューが表示されます。
開いてるメニューを閉じる場合は、もう一度▼をクリックします。
また、閉じるボタンを押せば、一気に全ツリーを閉じる事ができます。
サンプルでは同じリンクが2つ合ったりしますが、
実際に使用する時は同じものを2つ置く必要はありません。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
kazu=4;
taihi=new Array();
function hyouji(doko){
if(document.layers)
{kazu=document.layers.length/2;
lay_name=document.layers["lay"+doko];
tit_name=document.layers["title"+doko];
if(lay_name.visibility == 'show')
{lay_name.visibility='hidden';
dotti=1;
}
else {lay_name.visibility='show';
tate=tit_name.pageY+tit_name.clip.height;
yoko=tit_name.pageX;
lay_name.top=tate;
lay_name.left=yoko;
dotti=0;
}
if(doko < kazu-1)
{
for(i=doko+1; i<kazu; i++){
tate=document.layers["lay"+doko].clip.height;
if(dotti == 1)
document.layers["title"+i].moveBy(0,-tate);
else
document.layers["title"+i].moveBy(0,tate);
if(document.layers["lay"+i].visibility=='show')
{
if(dotti == 1)
document.layers["lay"+i].moveBy(0,-tate);
else
document.layers["lay"+i].moveBy(0,tate);
}
}
}
}
else if((document.getElementById) && (!document.all))
{
lay_name=document.getElementById("lay"+doko);
if(lay_name.style.visibility == 'visible')
{lay_name.style.visibility='hidden';
lay_name.style.display="none";
}
else {lay_name.style.visibility='visible';
lay_name.style.display="block";
}
}
else if(document.all)
{
lay_name=document.all("lay"+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.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];
}
}
}
function CloseTree()
{
for(i=0; i<kazu; i++)
{
if(document.layers)
{
if(document.layers["lay"+i].visibility == 'show')
{
tate=document.layers["lay"+i].clip.height;
for(j=i+1; j<kazu; j++)
document.layers["title"+j].moveBy(0,-tate);
}
document.layers["lay"+i].visibility='hidden';
}
else if((document.getElementById) && (!document.all))
{
document.getElementById("lay"+i).style.visibility='hidden';
document.getElementById("lay"+i).style.display="none";
}
else if(document.all)
{
document.all("lay"+i).style.visibility='hidden';
document.all("lay"+i).style.display="none";
}
}
}
if(document.layers)
{document.write('<style type="text/css">span{position:absolute;visibility:hidden;}</style>');}
else if((document.getElementById) && (!document.all))
{document.write('<style type="text/css">span{position:relative;display:none;}</style>');}
else if(document.all)
{document.write('<style type="text/css">span{position:relative;display:none;}</style>');}
//-->
</script>
</head>
<body>
<a href="javascript:CloseTree();">閉じる</a>
<br>
<form><input type="button" value="閉じる" onClick="CloseTree();"></form>
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
<tt>├</tt><a href="../../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html">JavaScript</a><br>
</span>
<div id="title1" style="position:relative;visibility:visible;">
<layer name="title1">
<a href="JavaScript:hyouji(1);">▼</a>Contents
</layer></div>
<span id="lay1">
<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>
<div id="title2" style="position:relative;visibility:visible;">
<layer name="title2">
<a href="JavaScript:hyouji(2);">▼</a>Link
</layer></div>
<span id="lay2">
<tt>├</tt><a href="../../etc_link.html">Link</a><br>
<tt>├</tt><a href="../../etc_link.html">Link2</a><br>
</span>
<div id="title3" style="position:relative;visibility:visible;">
<layer name="title3">
<a href="JavaScript:hyouji(3);">▼</a>Contents
</layer></div>
<span id="lay3">
<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>
[ 解説 ]
まず幾つポップアップメニューを設置するのか、またポップアップメニュー内の項目は幾つ設置するのか決めて下さい。
幾つツリーを用意するか決めたら、ソースの上から5行目にある
kazu=4;
に、数を記入します。
サンプルでは4つのポップアップメニューを使用していますので、
4の数字が入っています。
もし、使用する数が変われば、その都度書き替えて下さい。
次に、ソースの下の方をご覧下さい。
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
と書かれた部分があります。
1つのツリーのHTML上の構成は、この行で成り立っています。
サンプルは4つのポップアップメニューが設置されていますので、同じような複数行がが後3つほどありますね。
「Front」と書かれた部分は、ポップアップメニューの見出しに当たります。
お好きな文字をご指定下さい。タグなどで文字の大きさを変更する事も可能です。
「Front」と書かれた部分の3行下には、リンクタグがあります。
サンプルでは、「Front」のツリーには3つのリンクがありますから、
3行のリンクタグがあります。
その部分は、URL指定、リンクの名前などをお好きなようにご変更下さい。
リンクの数を増やす事も可能です。
リンクを増やしたい場合は、リンク行を1行そのまま増やし、必要な情報を書き換えるだけです。
例えば、「Front」のツリーにリンクを1つ追加する場合は、以下のようになります。
| 変更前 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
|
| 変更後 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript3</a><br>
</span>
|
反対にツリー内のリンクを減らしたい場合は、1行増やしたのと同じ要領で、1行削除します。
ツリー自体を増やしたい時は、1つのツリーを構成している複数行を丸ごと増やし、必要情報を書き換えます。
ただし、この時には注意が必要です。
サンプルの「Front」のツリーを例に挙げてみてみましょう。
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
を、よく見ていただきますと、
1行目の左の方に「title0」、
2行目の左に「title0」
3行目の真ん中に「0」、
4行目の左の方に「lay0」
と言う箇所があります。
同じ様な箇所が、他のツリーにもありますが、少しずつ違う部分があります。
どこが違うのか、2番目の「Contents」のツリーを見てみましょう。
<div id="title1" style="position:relative;visibility:visible;">
<layer name="title1">
<a href="JavaScript:hyouji(1);">▼</a>Contents
</layer></div>
<span id="lay1">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
よく見ると、
1行目の左には「title1」
2行目の左には「title1」
3行目の真ん中には「1」
4行目の左には「lay1」
となっています。
おわかりですか？
数字が、1つずつ繰り上がっています。
ツリーを増やす場合、これらを踏まえ、必ず数値部分を繰り上げていく必要があります。
では、実際にサンプルに1つツリーを増やすとどうなるか、
実例を挙げてみましょう。
| 変更前 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
……
<div id="title3" style="position:relative;visibility:visible;">
<layer name="title3">
<a href="JavaScript:hyouji(3);">▼</a>Contents
</layer></div>
<span id="lay3">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
|
| 変更後 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
……
<div id="title3" style="position:relative;visibility:visible;">
<layer name="title3">
<a href="JavaScript:hyouji(3);">▼</a>Contents
</layer></div>
<span id="lay3">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
<div id="title4" style="position:relative;visibility:visible;">
<layer name="title4">
<a href="JavaScript:hyouji(4);">▼</a>Contents
</layer></div>
<span id="lay4">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
|
ツリーの数を減らす場合は、増やしたのと同じ要領で、1つのツリーを構成している複数行を削除します。
実際にどうなるのか？
以下の例をご覧下さい。
| 変更前 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
<div id="title1" style="position:relative;visibility:visible;">
<layer name="title1">
<a href="JavaScript:hyouji(1);">▼</a>Contents
</layer></div>
<span id="lay1">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
<div id="title2" style="position:relative;visibility:visible;">
<layer name="title2">
<a href="JavaScript:hyouji(2);">▼</a>Link
</layer></div>
<span id="lay2">
<tt>├</tt><a href="../etc_link.html">Link</a><br>
<tt>├</tt><a href="../etc_link.html">Link2</a><br>
</span>
<div id="title3" style="position:relative;visibility:visible;">
<layer name="title3">
<a href="JavaScript:hyouji(3);">▼</a>Contents
</layer></div>
<span id="lay3">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
|
| 変更後 |
|---|
<div id="title0" style="position:relative;visibility:visible;">
<layer name="title0">
<a href="JavaScript:hyouji(0);">▼</a>Front
</layer></div>
<span id="lay0">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../kiso_faq.html">JavaScript FAQ</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
</span>
<div id="title1" style="position:relative;visibility:visible;">
<layer name="title1">
<a href="JavaScript:hyouji(1);">▼</a>Contents
</layer></div>
<span id="lay1">
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)</a><br>
<tt>├</tt><a href="../../index.html#JavaScript">JavaScript</a><br>
<tt>├</tt><a href="../lib_link.html">Library(Link)2</a><br>
</span>
<div id="title2" style="position:relative;visibility:visible;">
<layer name="title2">
<a href="JavaScript:hyouji(2);">▼</a>Link
</layer></div>
<span id="lay2">
<tt>├</tt><a href="../etc_link.html">Link</a><br>
<tt>├</tt><a href="../etc_link.html">Link2</a><br>
</span>
|
閉じるボタンは、サンプルでは2つご用意しております。
普通のリンクタグを使用するタイプと、フォームのボタンを使用するタイプです。
ソース内の、真ん中からやや下あたり、ボディタグの下にボタンのソースがあります。
以下の部分です。
<a href="javascript:CloseTree();">閉じる</a>
<br>
<form><input type="button" value="閉じる" onClick="CloseTree();"></form>
上の行が普通のリンクタグ、下がフォームのボタンになっています。
どちらかお好きな方をご利用下さい。
2つの内、不要なボタンは削除してご利用下さい。
|
