プルダウンリンクの組合せで多階層メニューを作る（書いて試せるホームページ制作講座）

プルダウンリンクの組合せで多階層メニューを作る

・　ソースの説明: 　プルダウンリンク集から複数のリンクを組合せて多階層メニューを作る事ができます。

[ ソース編集枠 ] の使い方: 下の青色の四角い編集枠内は書き換える事が可能で、「ソースを実行」ボタンで書き換えたソースがＷｅｂページとして開かれます。ソースを自由に書き直してお試しください。

ソース編集枠

<HTML>
<BODY>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="width:150;height:22;
		overflow:hidden;
		text-align:center;
		position:absolute;top:2;left:2;z-index:2;">
<DIV style="font-size:14px;padding:2 0 2 0;background-image:url('../loc_g20_001.jpg');color:#ffffff;border:1px solid #9999ff;">Menu No.1</DIV>
<TABLE style="width:152;font-size:12px;">
<TR>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_1</A>
</TD>
</TR>
<TR>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_2</A>
</TD>
</TR>
<TR>
<TD style="width:150;height:64;">

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:65;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.1_1</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_1_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_1_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_1_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_1_4</A>
</TD>
</TR>
</TABLE>
</DIV>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:87;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.1_2</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_2_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_2_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_2_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_2_4</A>
</TD>
</TR>
</TABLE>
</DIV>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:109;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.1_3</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_3_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_3_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_3_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.1_3_4</A>
</TD>
</TR>
</TABLE>
</DIV>

</TD>
</TR>
</TABLE>
</DIV>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="width:150;height:22;
		overflow:hidden;
		text-align:center;
		position:absolute;top:2;left:154;z-index:2;">
<DIV style="font-size:14px;padding:2 0 2 0;background-image:url('../loc_g20_001.jpg');color:#ffffff;border:1px solid #9999ff;">Menu No.2</DIV>
<TABLE style="width:152;font-size:12px;">
<TR>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_1</A>
</TD>
</TR>
<TR>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_2</A>
</TD>
</TR>
<TR>
<TD style="width:150;height:64;">

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:65;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.2_1</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_1_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_1_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_1_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_1_4</A>
</TD>
</TR>
</TABLE>
</DIV>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:87;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.2_2</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_2_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_2_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_2_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_2_4</A>
</TD>
</TR>
</TABLE>
</DIV>

<DIV	onmouseover="this.style.zIndex=1;this.style.overflow='visible';"
	onmouseout="this.style.zIndex=2;this.style.overflow='hidden';"
	style="position:absolute;top:109;left:0;z-index:2;width:150;height:24;overflow:hidden;text-align:center;">
<TABLE style="width:302;font-size:12px;">
<TR>
<TD style="width:150;font-size:14px;text-align:center;background-color:#eeffee;border:1px solid #9999ff;text-align:center;cursor:pointer;">Menu No.2_3</TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_3_1</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="width:150;height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_3_2</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_3_3</A>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="height:20;background-color:#eeffee;border:1px solid #9999ff;text-align:center;">
<A href="#">Text Link No.2_3_4</A>
</TD>
</TR>
</TABLE>
</DIV>

</TD>
</TR>
</TABLE>
</DIV>

</BODY>
</HTML>

戻る

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.

SEO		[PR] 花おまとめローン Windows7 冷え性対策	動画掲示板レンタルサーバーライブチャット SEO