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添加到當前頁面就可以實現了，就是這麼簡單哦！