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

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

 

■ JavaScript - サンプル集(257種類) - リンク
　　 - ポップアップメニュー DHTML版（ツリー型 Ver6・複数階層

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

このサンプルではツリーの中に子ツリーを作成できます。
ただし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
Frontlay0_0
Front1lay0_0_0
Front2lay0_0_1
Front3lay0_0_2
Front11lay0_0_0_0
Front12lay0_0_0_1
Front13lay0_0_0_2


となっています。

これを、親子孫の関係で書きますと、

Frontlay0_0
Front1lay0_0_0
Front11lay0_0_0_0
Front12lay0_0_0_1
Front13lay0_0_0_2
Front2lay0_0_1
Front3lay0_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を変更して下さい。

　 WEST MiRa > JavaScript > サンプル集(257種類) > リンク > ポップアップメニュー DHTML版（ツリー型 Ver6・複数階層 >

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

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