js+css实现页面右键菜单

这几天用到需要在页面上右键弹出功能菜单的功能，经过研究和查阅资料，找到个切实可行的方案，记录下来，以备以后使用。

首先准备js代码，用于创建菜单，定位鼠标位置等等准备工作：

// 菜单初试化
var MenuItem="";
var strMenu;
var sp=true; //使用特效设置，false表示不是用特效
var ts=6;
//添加菜单项目
function addmenu(type,caption,url,target,icon)
{
if (!icon)
iconpath="jg_n_help.gif";//默认图标路径
else
iconpath=icon;
switch(type)
{
case 0:
if (!target)
MenuItem+="<tr height=24><td><td class="loseitems" onClick=\"javascript:location.href='"+url+"'\" background="+iconpath+">"+caption+"<td>";
else
{
if (target=='_blank')
MenuItem+="<tr height=24><td><td class="loseitems" onClick=\"javascript:window.open('"+url+"')\" background="+iconpath+">"+caption+"<td>";
else
MenuItem+="<tr height=24><td><td class="loseitems" onClick=\"javascript:"+target+".location.href='"+url+"'\" background="+iconpath+">"+caption+"<td>";
}
break;
case 1:
MenuItem+="<tr height=24><td><td class="loseitems" onClick=\"javascript:"+url+"\" background="+iconpath+">"+caption+"<td>";
break;
case 2:
MenuItem+="<tr><td><td align=right colspan=2><hr>";
break;
}
}

//建立菜单
function buildmenu(){
alert();
strMenu = "<div id=\"menu\" class=\"clsMenu\">";
strMenu +="<table border=0 cellspacing=0 width=100% cellpadding=0 onMouseover=\"highlight()\" onMouseout=\"lowlight()\"><tr height=1><td width=1><td><td width=1>";
strMenu +=MenuItem;
strMenu += "<tr height=1><td><td><td></table>";
strMenu += "</div>";
if (isie()) document.write (strMenu);
document.oncontextmenu= showmenu;
document.body.onclick= hidemenu;
}

// 判断客户端浏览器
function isie() {
if (navigator.appName=="Microsoft Internet Explorer") {
return true;
} else {
return false;
}
}

// 显示菜单
function showmenu(){
if (isie()){
var redge=document.body.clientWidth-event.clientX-100;
var bedge=document.body.clientHeight-event.clientY-25;
if (redge<menu.offsetWidth){
menu.style.left=document.body.scrollLeft-menu.offsetWidth;
}
else{
menu.style.left=document.body.scrollLeft+event.clientX+"px";

}
menu.style.top=document.body.scrollTop+event.clientY+"px";
menu.style.visibility="visible";
}
return false;
}
// 隐藏菜单
function hidemenu(){
if (isie()) menu.style.visibility="hidden";
}

// 菜单项获得焦点时加亮显示
function highlight(){
if (event.srcElement.className=="loseitems"){
if (sp)
event.srcElement.style.filter="revealTrans(duration=.1)" ;event.srcElement.filters[0].transition=ts;
if (sp)
event.srcElement.filters[0].apply();
event.srcElement.className="menuitems";
if (sp)
event.srcElement.filters[0].play();
}
}

// 菜单项失去焦点
function lowlight(){
if (event.srcElement.className=="menuitems"){
if (sp) event.srcElement.style.filter="blendtrans(duration=.15)" ;
if (sp) event.srcElement.filters[0].apply();
event.srcElement.className="loseitems";
if (sp) event.srcElement.filters[0].play();
}
}
//--------------js代码结束-------------

//------------插入菜单项目演示---------

//addmenu(type,caption,url,target,icon)
//type=0 超连接 type=1 执行javascript语句 type=2 分割线
//caption 显示文字
//url 地址或javascript语句
//target 目标
//icon 图标

addmenu(1,"显示告警");
addmenu(1,"显示通知");
addmenu(2);
addmenu(1,"刷新单板状态");
buildmenu();

接下来是css，用于定义右键菜单的样式：

.clsMenu
{
cursor: default;
color: #000000;
position: absolute;
width: 190px;
background-color: #D4D0C8;
border: 1px solid #000000;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3); background-image:url('84v__back.gif')
}

.menuitems
{
font-size: 12px;
color: #000000;
padding-left: 30px;
padding-right: 19px;
padding-top:2px;
padding-bottom:0px;
line-height: 18px;
background-color:#B6BDD2;
border:1px solid #0A246A;
color:#000000;
background-repeat:no-repeat;
}
.loseitems
{
font-size: 12px;
color: #000000;
padding-left: 29px;
padding-right: 10px;
padding-top:1px;
padding-bottom:1px;
line-height: 18px;
color:#000000;
background-repeat:no-repeat;
}
hr
{
width:100%;
height:1px;
}

最后是页面了，页面内容自定义，只要把上面的js和css添加到当前页面就可以实现了，就是这么简单哦！