レイヤを使ったプルダウンメニュー
原案:平井 公大 氏 (2000/09/24 登録)
選択ボックスではなく、レイヤを使ったプルダウンメニューです。クリックするとメニューを表示し、またクリックするとメニューを閉じます。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>レイヤを使ったプルダウンメニュー</title>
<script type="text/javascript">
<!--
function DM(tag) {
if ( document.getElementById ) {
if ( document.getElementById(tag).style.visibility == "hidden" )
document.getElementById(tag).style.visibility = "visible";
else document.getElementById(tag).style.visibility = "hidden";
}
if ( document.layers ) {
if ( document.layers[tag].visibility == "hide" )
document.layers[tag].visibility = "show";
else document.layers[tag].visibility= "hide";
}
}
// -->
</script>
<style type="text/css">
<!--
a.pdown:link {
font-size: 12px;
text-decoration:none;
color: #FFFFFF;
}
a.pdown:visited {
font-size: 12px;
text-decoration:none;
color: #FFFFFF;
}
a.pdown:active {
font-size: 12px;
text-decoration:none;
color: #FF0000;
}
a.pdown:hover {
font-size: 12px;
text-decoration:none;
color: #990000;
}
td.menu {
line-heihgt:1.3em;
}
-->
</style>
</head>
<body>
<div style="text-align: center; height:70px">
<div style="position:absolute; left:210px; top:350px; width:100px; background-color:#000000;
text-align:center; padding:2px; margin:0em" id="menu1">
<a href="../../event/script/s.htm" class="pdown" onClick="DM('tag1'); return false;">リンクA</a>
</div>
<div style="position:absolute; left:320px; top:350px; width:100px; background-color:#000000;
text-align:center; padding:2px; margin:0em" id="menu2">
<a href="../../event/script/s.htm" class="pdown" onClick="DM('tag2'); return false;">リンクB</a>
</div>
<div id="tag1" style="position: absolute; left:210px; top:370px; width:100px; visibility:hidden;
background-color:#000000; text-align:center; margin:0em">
<table bgcolor="#000000" width="100" cellpadding="2">
<tr>
<td align="center" class="menu"><a href="fhpg.htm" class="pdown">リンクA1</a><br>
<a href="fhpg.htm" class="pdown">リンクA2</a><br>
<a href="fhpg.htm" class="pdown">リンクA3</a><br>
</td>
</tr>
</table>
</div>
<div id="tag2" style="position:absolute; left:320px; top:370px; width:100px; visibility:hidden;
background-color:#000000; text-align:center; margin:0em">
<table bgcolor="#000000" width="100" cellpadding="2">
<tr>
<td align="center" class="menu"><a href="fhpg.htm" class="pdown">リンクB1</a><br>
<a href="fhpg.htm" class="pdown">リンクB2</a><br>
<a href="fhpg.htm" class="pdown">リンクB3</a><br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>