<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义右键菜单-web前端菜鸟团</title>
<script type="text/javascript">
window.onload=function()
{
var oMyMenu=document.getElementById('menu');
document.oncontextmenu=function(ev)
{
var oEvent=ev||event;
oMyMenu.style.display="block";
oMyMenu.style.left=oEvent.clientX+'px';
oMyMenu.style.top=oEvent.clientY+'px';
//oEvent.cancelBubble=true;
var oLi=oMyMenu.getElementsByTagName('li');
var i=0;
for(i=0;i<oLi.length;i++)
{
oLi[i].onmouseover=function()
{
for(i=0;i<oLi.length;i++)
{
oLi[i].className="";
}
this.className="active";
}
}
return false; //不阻止也成？~
}
document.onclick=function()
{
oMyMenu.style.display="none";
};
};
</script>
<style type="text/css">
*{ padding:0px; margin:0px; list-style:none; font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;}
#menu{ position:absolute; display:none; border:1px solid #CCC;}
#menu li{ padding:5px 20px; cursor:pointer;}
#menu a{text-decoration:none;}
#menu .active { background:#FF0000;}
#menu .active a{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>
点击右键
<br />
<ul id="menu">
<li><a href="http://www.imtaih.com/index.html">关于我</a></li>
<li><a href="http://www.imtaih.com/about.html">了解我</a></li>
<li><a href="http://www.imtaih.com/plus/guestbook.php">联系我</a></li>
</ul>
<a href="http://www.owebbird.com" title="Web前端-菜鸟团">Web前端-菜鸟团</a>
</body>
</html>