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.οncοntextmenu= showmenu;
 document.body.οnclick= 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添加到当前页面就可以实现了，就是这么简单哦！

转载于:https://www.cnblogs.com/elleniou/archive/2013/05/15/3079018.html