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

トップ > アラカルト > ポップアップメニューを実現する

#### ■ 説明

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)では動作はしませんがエラーが発生しないことを確認済みです。

Copyright (C) 2002 杜甫々
初版：2002年1月5日
http://www.tohoho-web.com/wwwxx035.htm