右クリック、メニュー表示


ホームページを右クリックしたときに
メニューを表示させる方法を解説します。

以下のようなメニューを作ることができます。




少し複雑なので、間違えないようにしてください。

また、数値がおかしいと表示が変になってしまうので、
ある程度具体的な数値を入れておきます。


まず、<body> 〜 </body>の間に
<span id="menu"></span>を置いてください。
場所はどこでもいいですが、上のほうがいいかもしれません。


次に、<head> 〜 </head>の
<style type="text/css"> 〜 </style>に
#menu{
 position:absolute;
 background-color:#bbffff;
 padding:6pt;
 font-size:15px;
 background-image:url('背景用の画像ファイルを指定');
 filter:alpha(opacity=85);
 visibility:hidden;
}
a.tono{
 width:100%;
 white-space:nowrap;
}

a.tono:link{
 background-color:#ffffff;
 color:#000000;
 text-decoration:none;
}

a.tono:visited{
 background-color:#ffffff;
 color:#000000;
 text-decoration:none;
}

a.tono:hover{
 background-color:#ffffff;
 color: #ffffff;
 background-color:#5599ff;
}

と記述してください。


このとき、
 background-color:#bbffff;
 filter:alpha(opacity=85);
などの値は変更可能が、それは後でやってください。


次はスクリプトを記述したJSファイルを呼び出します。
<script language="JavaScript" type="text/javascript" src="menu.js"></script>


そして、メニューを記述するJSファイルを作ります。
JSファイルもテキストファイルなので、
テキスト文書の拡張子を「.js」にすれば作ることができます。
なお、ファイル名はmenuとしてください。


JSファイルには以下のように記述してください。


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 align='center'><a class='tono' href='リンク先のアドレス' target='_self'>リンク先</a></div>"
      + "<div align='center'><a class='tono' href='リンク先のアドレス' target='_self'>リンク先</a></div>"
      + "<div align='center'>&nbsp;</div>"
      + "<div align='center'><a class='tono' href='リンク先のアドレス' target='_self'>リンク先</a></div>"
      + "<div align='center'><a class='tono' href='リンク先のアドレス' target='_self'>リンク先</a></div>"
      + "<div align='center'><a class='tono' href='リンク先のアドレス' target='_self'>リンク先</a></div>";
    if (menu.style.width < 120) {
        menu.style.width = 120;
    }
    menu.style.visibility = "visible";
    return false;
}

function OnLeftButton() {
    menu.style.visibility = "hidden";
    return true;
}


このとき、class='tono'のtonoを変更するのであれば、
<style type="text/css"> 〜 </style>で記述したスタイルの
tonoの部分を同じ名前に変えてください。

if (menu.style.width < 120) {
menu.style.width = 120;
の部分ですが、これはメニューに表示する文字の数によって変えます。
文字が多くなるようでしたらこの数値を大きくしてください。


また、
      + "<div align='center'>&nbsp;</div>"

の部分ではメニューに一行開けています。
これを削除すればメニューに空白はなくなります。


それから、リンク先のターゲットについては
とりあえず全部_selfにしていますが、
自分で好きなように変えてください。


もし、メニューのデザインを変えたいのであれば、
JSファイルの中でメニューの表示項目を変更でき、
外観は<style type="text/css"> 〜 </style>の中を
編集することで変更することができます。



この方法で出来上がったファイルが以下のものになります。

→ ダウンロード

なお、リンク先のファイルが存在していないので、
メニューをクリックしてもリンク先は表示されません。




メニューに戻ります。