ポップアップメニューを実現する

Internet Explorer で、独自のポップアップメニューを実現します。

このページ上で、マウスを右クリックしてください。

<html>
<head>
<title>Popup Example</title>
<style type="text/css">
<!--
#menu {
    position: absolute;
    background-color: #c0c0c0;
    border-top: 1pt solid white;
    border-right: 1pt solid black;
    border-bottom: 1pt solid black;
    border-left: 1pt solid white;
    padding: 2pt 4pt 2pt 4pt;
    visibility: hidden;
}
A.mi {
    width: 100%;
    white-space: nowrap;
}
A.mi:link {
    color: #000000;
    text-decoration: none;
}
A.mi:visited {
    color: #000000;
    text-decoration: none;
}
A.mi:hover {
    color: #ffffff;
    background-color: #000080;
}
-->
</style>
<script language="JScript">
<!--
document.oncontextmenu = OnRightButton;
document.onclick = OnLeftButton;

function OnRightButton() {
    menu.style.top = document.body.scrollTop + event.y;
    menu.style.left = document.body.scrollLeft + event.x;
    menu.innerHTML =
        "<div><a class='mi' href='aaa.htm'>AAA</a></div>"
      + "<div><a class='mi' href='bbb.htm'>BBB</a></div>";
    if (menu.style.width < 100) {
        menu.style.width = 100;
    }
    menu.style.visibility = "visible";
    return false;
}

function OnLeftButton() {
    menu.style.visibility = "hidden";
    return true;
}
// -->
</script>
</head>
<body>
<div id="menu"></div>
</body>
</html>

IE6.0(Win)で動作確認しています。Netscape 4.73/6.1(Win)では動作はしませんがエラーが発生しないことを確認済みです。

ポップアップメニューを実現する

■ 説明

■ 実例

■ ソースコード

■ 動作確認