| ポイント |
<![CDATA[
if (flag) pdMENU.style.visibility = "hidden"; else pdMENU.style.visibility = "visible";
flag = !flag;
<div id="pdMENU" style="position:absolute;top:12px;left:0px;visibility:hidden">
]]>
|
| 説 明 |
プルダウンメニューを表示させるにはドキュメントオブジェクトの表示、非表示を切り替えます。表示の切り替えはスタイルシートで行います。「オブジェクト名.style.visibility」にhiddenを設定すると非表示、visibleを設定すると表示されます。クリック毎に表示を切り替えるにはトグルスイッチを用意します。「flag = !flag」とすることでtrueとfalseの値が交互に切り替わります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックするとプルダウンメニューを出す</title>
<script Language="JavaScript"><!--
flag = false;
function pulldownmenu()
{
if (flag) pdMENU.style.visibility = "hidden"; else pdMENU.style.visibility = "visible";
flag = !flag;
}
// --></script>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;">
<a href="javaScript:pulldownmenu()">■メニュー</a>
</div>
<div id="pdMENU" style="position:absolute;top:12px;left:0px;visibility:hidden">
<a href="http://www.yahoo.co.jp/" >Yahoo</A><BR>
<a href="http://www.infoseek.co.jp/">infoseek</A><BR>
<a href="http://www.lycos.co.jp/" >lycos</A><BR>
</div>
</body>
</html>
]]>
|
| 補足説明 |
表示する位置はスタイルシートで設定しておきます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックするとプルダウンメニューを出す