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添加到当前页面就可以实现了，就是这么简单哦！