右クリック、メニュー表示
ホームページを右クリックしたときに
メニューを表示させる方法を解説します。
以下のようなメニューを作ることができます。

少し複雑なので、間違えないようにしてください。
また、数値がおかしいと表示が変になってしまうので、
ある程度具体的な数値を入れておきます。
まず、<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'> </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'> </div>"
の部分ではメニューに一行開けています。
これを削除すればメニューに空白はなくなります。
それから、リンク先のターゲットについては
とりあえず全部_selfにしていますが、
自分で好きなように変えてください。
もし、メニューのデザインを変えたいのであれば、
JSファイルの中でメニューの表示項目を変更でき、
外観は<style type="text/css"> 〜 </style>の中を
編集することで変更することができます。
この方法で出来上がったファイルが以下のものになります。
→ ダウンロード
なお、リンク先のファイルが存在していないので、
メニューをクリックしてもリンク先は表示されません。
メニューに戻ります。