だるかぶ
サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
ポップアップメニューのサンプルです。
動作サンプル
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
現場からは以上です。それでは、またッ！！！
だるかぶ
最後までお読みいただきありがとうございます！
スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！
記事内容の修正について記載している内容は記事執筆時の情報です。
できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。