Java-Script

　マウスの右ボタンクリックでメニューを表示する 　　　　　

Sample

マウスの右ボタンをクリックしてください。

戻る

ホーム

文人COM

Yahoo

infoseek

excite

google

fresheye

goo

lycos

ソース

<HEAD>

<style>
<!--
.mnu_bk0 {
  position:absolute;
  text-align:left;
  width:200px;
  border:6px solid blue;
  background-color:menu;
  line-height:30px;
  cursor:default;
  visibility:hidden;
}
.mnu_bk1 {
  cursor:default;
  font:menutext;
  position:absolute;
  text-align:left;
  font-size: 12pt;
  width:140px;
  background-color:#ffffa0;
  border:1 solid buttonface;
  visibility:hidden;
  border:2 outset buttonhighlight;
}
.menu_item {
  padding-left:15px;
  padding-right:10px;
}
-->
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
var menu_type = "mnu_bk1";
function show_menuIe5() {
  var rightedge = document.body.clientWidth-event.clientX;
  var bottomedge = document.body.clientHeight-event.clientY;
  if (rightedge < Ie_Menu.offsetWidth){
    Ie_Menu.style.left = document.body.scrollLeft + event.clientX - Ie_Menu.offsetWidth;
  } else {
    Ie_Menu.style.left = document.body.scrollLeft + event.clientX;
  }
  if (bottomedge < Ie_Menu.offsetHeight){
    Ie_Menu.style.top = document.body.scrollTop + event.clientY - Ie_Menu.offsetHeight;
  } else {
    Ie_Menu.style.top = document.body.scrollTop + event.clientY;
    Ie_Menu.style.visibility = "visible";
  }
  return false;
}
function hidden_menuIe5() {
  Ie_Menu.style.visibility = "hidden";
}
function higher_Ie5() {
  if (event.srcElement.className == "menu_item") {
    event.srcElement.style.backgroundColor = "highlight";
    event.srcElement.style.color = "white";
  }
}
function lower_Ie5() {
  if (event.srcElement.className == "menu_item") {
    event.srcElement.style.backgroundColor = "";
    event.srcElement.style.color = "black";
    window.status = "";
   }
}
function conect_Ie5() {
  if (event.srcElement.className == "menu_item") {
    if (event.srcElement.getAttribute("target") != null){
      window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
    } else {
      window.location = event.srcElement.url;
    }
  }
}
//-->
</script>

</HEAD>
<BODY>

<div id="Ie_Menu" class="mnu_bk0" onMouseover="higher_Ie5()" 
onMouseout="lower_Ie5()" onClick="conect_Ie5();">

<div class="menu_item" url="javascript:history.back();">戻る</div>
<hr>
<div class="menu_item" url="http://bunjin.com/index2.html" target=_top>ホーム</div>
<div class="menu_item" url="http://bunjin.com/" target=_top>文人COM</div>
<hr>
<div class="menu_item" url="http://www.yahoo.co.jp" target=_blank>Yahoo</div>
<div class="menu_item" url="http://japan.infoseek.com/" target=_blank>infoseek</div>
<div class="menu_item" url="http://www.excite.co.jp/" target=_blank>excite</div>
<div class="menu_item" url="http://www.google.com/" target=_blank>google</div>
<div class="menu_item" url="http://search.fresheye.com/" target=_blank>fresheye</div>
<div class="menu_item" url="http://www.goo.ne.jp/" target=_blank>goo</div>
<div class="menu_item" url="http://www.lycos.co.jp/" target=_blank>lycos</div>
</div>

<script language="JavaScript">
<!--
if (document.all && window.print) {
  Ie_Menu.className = menu_type;
  document.oncontextmenu = show_menuIe5;
  document.body.onclick = hidden_menuIe5;
}
//-->
</script>

</BODY>
</HTML>

ワンポイント解説

url="http://www.yahoo.co.jp" target=_blank　で、ヤフーは別ウインドウで開くようにしています。