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

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

 

■ JavaScript - サンプル集(257種類) - DHTML
　　 - ポップアップメニュー DHTML版（ツリー型 Ver4・一つだけ開く）

フォームではなく、文字で表示するポップアップメニューです。
文字の左にある▼をクリックするとメニューが表示されます。
開いてるメニューを閉じる場合は、もう一度▼をクリックします。
このバージョンでは、一度に開けるメニューは一つだけです。

サンプルでは同じリンクが2つ合ったりしますが、 実際に使用する時は同じものを2つ置く必要はありません。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
・補足解説を見る




[ ソース ] 

<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	kazu = 4;
	taihi = new Array();
	tate2 = 0;
	yoko2 = 0;
	doko2 = 0;
	mae = '-';
	function hyouji(doko){
		if((document.layers) && tate2 != 0 && yoko2 != 0 && doko != doko2)
			{
			document.layers["lay"+doko2].visibility = 'hidden';
			for(i=doko2+1; i<kazu; i++){
				tate=document.layers["lay"+doko2].clip.height;
				document.layers["title"+i].moveBy(0,-tate);
				document.layers["lay"+i].moveBy(0,-tate);
					}
			}
		for(i=0; i<kazu; i++)
			{
			if((document.getElementById) && (!document.all) && i != doko)
				document.getElementById("lay"+i).style.display="none";
			else if((document.all) && i != doko)
				document.all("lay"+i).style.display="none";
			}
		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;
					tate2=tate;
					yoko2=yoko;
					doko2=doko;
					}

				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);
			else
				lay_name=document.all("lay"+doko);

			if(lay_name.style.visibility == 'block' || mae == doko)
				{
				lay_name.style.display="none";
				}
			else
				{
				lay_name.style.display="block";
				taihi[doko]=lay_name.innerHTML;
				if(navigator.appVersion.indexOf("MSIE 4.")!=-1)
					lay_name.innerHTML="<br>"+taihi[doko];
				}
			}
		mae = doko;
		}
  if(document.layers)
		{document.write('<style type="text/css">span{position:absolute;visibility:hidden;}</style>');}
  else 
		{document.write('<style type="text/css">span{position:relative;display:none;}</style>');}

//-->
</script>
</head>
<body>

<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">JavaScript2</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>

　・
　・
　・
</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>

　 WEST MiRa > JavaScript > サンプル集(257種類) > DHTML > ポップアップメニュー DHTML版（ツリー型 Ver4・一つだけ開く） >

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

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