[ JavaScript ] ポップアップメニューのサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

ポップアップメニューのサンプルです。

動作サンプル

https://codepen.io/darucub/pen/EaKZNmr

サンプルコード

<html>
<head>
<title>Popup Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--hide this script from non-javascript-enabled browsers
/* Popup Menu Script */
Layer1Flg = "hidden";
Layer2Flg = "hidden";
function PullDownMenu(tagName) {
	if (tagName == 'Layer1'){
		//alert("Select Layer Name = " + tagName);
		if (Layer1Flg == 'hidden'){
			Layer1Flg = 'visible';
		}
		else {
			Layer1Flg = 'hidden';
		}
		Layer2Flg = 'hidden';
	}
	else if (tagName == 'Layer2') {
		//alert("Select Layer Name = " + tagName);
		if (Layer2Flg == 'hidden'){
			Layer2Flg = 'visible';
		}
		else {
			Layer2Flg = 'hidden';
		}
		Layer1Flg = 'hidden';
	}
	else {
		//alert("Select Layer Name = " + tagName);
		Layer1Flg = 'hidden';
		Layer2Flg = 'hidden';
	}
	if (document.layers) document.Layer1.visibility = Layer1Flg;
	if (document.all) document.all('Layer1').style.visibility = Layer1Flg;
	if (document.layers) document.Layer2.visibility = Layer2Flg;
	if (document.all) document.all('Layer2').style.visibility = Layer2Flg;
}
// stop hiding -->
</script>
<STYLE type="text/css">
	<!--
	A:link { color:black; text-decoration:none; }
	A:visited { color:black; text-decoration:none; }
	A:hover { color: red; text-decoration:none; }
	.size1 { font-size: 10px }
	-->
</STYLE>
</head>
<body bgcolor="#ffffff" leftmargin="20" topmargin="20" marginwidth="20" marginheight="20">
<table border="0" cellpadding="3" cellspacing="2" width="150">
	<tr valign="top">
		<td class="size1" bgcolor="#DDDDDD"><a href="#" onClick="PullDownMenu()">Normal Link Text</a></td>
	</tr>
	<tr valign="top">
		<td class="size1" bgcolor="#DDDDDD"><a href="#" onClick="PullDownMenu('Layer1');return false">Popup Menu Link Text 1</a></td>
	</tr>
	<tr valign="top">
		<td class="size1" bgcolor="#DDDDDD"><a href="#" onClick="PullDownMenu('Layer2');return false">Popup Menu Link Text 2</a></td>
	</tr>
</table>
<DIV style="position:absolute; width:150px; height:25px; z-index:1; top: 41px; left: 168px; visibility: hidden">
	<TABLE border="0" cellspacing="2" cellpadding="3" width="150">
		<TR valign="TOP">
			<TD NOWRAP bgcolor="#DDDDDD" class="size1"><A href="#" onClick="PullDownMenu()">Sample Menu 1</A></TD>
		</TR>
		<TR valign="TOP">
			<TD NOWRAP bgcolor="#DDDDDD" class="size1"><A href="#" onClick="PullDownMenu()">Sample Menu 2</A></TD>
		</TR>
		<TR valign="TOP">
			<TD NOWRAP bgcolor="#DDDDDD" class="size1"><A href="#" onClick="PullDownMenu()">Sample Menu 3</A></TD>
		</TR>
	</TABLE>
</DIV>
<DIV style="position:absolute; width:150px; height:25; z-index:1; top: 62px; left: 168px; visibility: hidden">
	<TABLE border="0" cellspacing="2" cellpadding="3" width="150">
		<TR valign="TOP">
			<TD class="size1" bgcolor="#DDDDDD"><A href="#" onClick="PullDownMenu()">Sample Menu 4</A></TD>

		</TR>
		<TR valign="TOP">
			<TD class="size1" bgcolor="#DDDDDD"><A href="#" onClick="PullDownMenu()">Sample Menu 5</A></TD>
		</TR>
	</TABLE>
</DIV>
<P>ポップアップメニューはリンク先にジャンプしたときに消えます。<BR>
	ジャンプせずにメニューを消したいときは、メニューを出した項目をクリックすると消えます。</P>
</body>
</html>

動作確認

• OK – Windows Internet Explorer 7.0

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。