WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
[ JavaScriptの目次 ]
▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]
◆↑ホームへ

 

■ JavaScript - サンプル集(257種類) - DHTML
　　 - ポップアップメニュー DHTML版（ツリー型 Ver5・開く閉じるボタン付き）

フォームではなく、文字で表示するポップアップメニューです。
文字の左にある▼をクリックするとメニューが表示されます。
開いてるメニューを閉じる場合は、もう一度▼をクリックします。
また、開くボタンを押せば、一気に全ツリーを開く事ができます。
閉じるボタンを押せば、一気に全ツリーを閉じる事が出来ます。

サンプルでは同じリンクが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";
				}
			}
		}

	function OpenTree()
		{
		for(i=0; i<kazu; i++)
			{
			if(document.layers)
				{
				if(document.layers["lay"+i].visibility == 'hide')
					{
					tate=document.layers["lay"+i].clip.height;
					for(j=i+1; j<kazu; j++)
						{
						document.layers["title"+j].moveBy(0,tate);
						document.layers["lay"+j].moveBy(0,tate);
						}
					document.layers["lay"+i].visibility='show';
					}
				}
			else if((document.getElementById) && (!document.all))
				{
				document.getElementById("lay"+i).style.visibility='visible';
				document.getElementById("lay"+i).style.display="block";
				}
			else if(document.all)
				{
				document.all("lay"+i).style.visibility='visible';
				document.all("lay"+i).style.display="block";
				}
			}
		}

	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>

<a href="javascript:OpenTree();">開く</a>
<br>
<form><input type="button" value="開く" onClick="OpenTree();"></form>
<br>

<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つの内、不要なボタンは削除してご利用下さい。

開くボタンは、サンプルでは2つご用意しております。
普通のリンクタグを使用するタイプと、フォームのボタンを使用するタイプです。

ソース内の、真ん中からやや下あたり、ボディタグの下にボタンのソースがあります。
以下の部分です。

<a href="javascript:OpenTree();">開く</a>
<br>
<form><input type="button" value="開く" onClick="OpenTree();"></form>

上の行が普通のリンクタグ、下がフォームのボタンになっています。

どちらかお好きな方をご利用下さい。
2つの内、不要なボタンは削除してご利用下さい。

　 WEST MiRa > JavaScript > サンプル集(257種類) > DHTML > ポップアップメニュー DHTML版（ツリー型 Ver5・開く閉じるボタン付き） >

バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.