| ポイント |
<![CDATA[
pMENU.style.left = event.x;
pMENU.style.top = event.y;
if (flag) pMENU.style.visibility = "hidden"; else pMENU.style.visibility = "visible";
flag = !flag;
document.onclick = popupmenu;
<div id="pMENU" style="position:absolute;top:12px;left:0px;visibility:hidden;background-color:yellow;width:100px;">
]]>
|
| 説 明 |
ポップアップメニューを表示させるにはウィンドウ上のクリック座標を求め表示するオブジェクトをクリック位置に移動後、表示させます。クリック座標はevent.x、event.yで取得できます。これをオブジェクトのスタイルシートプロパティ(left、top)に代入することでクリック位置にポップアップメニューを移動できます。表示させるにはスタイルシートを使い「オブジェクト名.style.visibility」にvisibleを代入します。関数を定義しただけではウィンドウ上をクリックしても反応しないためイベントハンドラを指定します。「document.onclick=関数名」としてクリック時の処理先関数名（イベントハンドラ）を記述します。間違って関数名のあとに()を付けないように注意して下さい。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックするとポップアップメニューを出す</title>
<script Language="JavaScript"><!--
flag = false;
function popupmenu()
{
pMENU.style.left = event.x;
pMENU.style.top = event.y;
if (flag) pMENU.style.visibility = "hidden"; else pMENU.style.visibility = "visible";
flag = !flag;
}
document.onclick = popupmenu;
// --></script>
</head>
<body>
画面上でクリックしてください。
<div id="pMENU" style="position:absolute;top:12px;left:0px;visibility:hidden;background-color:yellow;width:100px;">
<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>
]]>
|
| 補足説明 |
Mac+IE4.xでは動作しますがMac+IE5.0では文字や画像など表示されているオブジェクト上でないとクリックが反応しないため期待通り動作しません。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックするとポップアップメニューを出す