js实现的XP风格的右键菜单_导航菜单

来源：宝玛科技网

使用说明：
在使用前，先建立菜单对象
var obj = new MouseMenu("obj");
注意，obj 要和 MouseMenu("obj") 的obj 相同
如建立了 obj 那么 obj 将会有以下方法，开始 obj.length = 0
方法：
1. addMenu(express[,icon][,url][,target][,title]);
功能：插入一个菜单，并且返回一个功能和上面说提起的 obj 一样的菜单对象
obj[obj.length] 然后 obj.length 将会 +1
说明：
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 可选，字符串，路径
target 可选，字符串就是 target
title 可选，字符串就是 title
2. addLink(express,[,icon][,url][,target][,title])
功能：插入一个连接然后 obj.length 将会 +1
说明
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 必须，字符串，路径
target 可选，字符串就是 target
title 可选，字符串就是 title
3. addHR()
功能：插入分割线
说明：
他不属于 link 和 menu 对象所以使用时，obj.length 不变
比如：
var MM = new MouseMenu("MM")
MM.addLink("连接","","http://hello.com")
MM.addHR()
MM.addMenu("菜单")
//下面是 MM[1] 而不是 MM[2] 因为 MM.addHR() MM.length 不会增加
MM[1].addLink("连接","","http://hello.com")
好了，说了这么多，应该会用了吧？
突然有人问：“在哪插入连接……”
…… 嗯~ 这个 ^_^! 看上面吧~~~~
附加：在代码中的其他的数据
//--------------- 有关数据 -----------------//
var IconList = new Array(); // icon图片集合，下标从 1 开始
IconList[1] = new Image();
IconList[1].src = "/Uploads//Uploads/icon/sub.gif";
//--------------------------- 声音开关 ------ 声音开关 ------------------//
var mouseCanSound = true;
var menuSpeed = 50; //---------- 菜单显示速度 ------------//
var alphaStep = 30; //---------- Alpaha 变化度 -----------//

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>网页特效|www.gxlcms.com|---XP风格的右键菜单</title> 
<STYLE>.menutable { 
 BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100 
} 
.menutrin { 
 BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand 
} 
.menutrout { 
 COLOR: #000000; CURSOR: hand 
} 
.menutd0 { 
 HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改变这个修改菜单高度--->: 
} 
.menutd1 { 
 FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px 
} 
.linktd1 { 
 WIDTH: 46px 
} 
.menutd2 { 
 WIDTH: 4px 
} 
.menuhr { 
 BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset 
} 
</STYLE> 
<BGSOUND id=theBS loop=0 src=""></HEAD> 
<BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt"> 
</table>'); 
} 
//----------- 构建 子菜单 对象 -------------// 
function SubMenu(objName,objID) 
{ 
 this.obj = objName; 
 this.id = objID; 
 this.addMenu = addMenu; 
 this.addLink = addLink; 
 this.addHR = addHR; 
 this.length = 0; 
} 
//-------------- 生成 菜单 makeMenu 方法 -----------// 
function makeMenu(subID,oldID,word,icon,url,target,thetitle) 
{ 
 var thelink = ''; 
 
 if(icon&&icon!="") 
 { 
 icon = ''; 
 } 
 else 
 { 
 icon = ''; 
 } 
 
 if(!thetitle||thetitle=="") 
 { 
 thetitle = ''; 
 } 
 
 
 if(url&&url!="") 
 { 
 thelink += ''; 
 } 
 
 var Oobj = document.getElementById(oldID); 
 /*--------------------------------------------- 菜单html样式 
 
 <tr class="menutrout" id="trMenu_one_0" title="I am title"> 
 <td class="menutd0"></td> 
 <td><nobr>菜单一</nobr></td> 
 <td class="menutd1">4</td> 
 <td class="menutd2"> </td> 
 </tr> 
 
 --------------------------------------------------*/ 
 
 Oobj.insertRow(); 
 
 with(Oobj.rows(Oobj.rows.length-1)) 
 { 
 id = "tr"+subID; 
 className = "menutrout"; 
 
 title = thetitle; 
 } 
 
 eventObj = "tr"+subID; 
 
 eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))'); 
 eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))'); 
 
 var trObj = eval(eventObj); 
 for(i=0;i<4;i++) 
 { 
 trObj.insertCell(); 
 } 
 with(Oobj.rows(Oobj.rows.length-1)) 
 { 
 cells(0).className = "menutd0"; 
 cells(0).innerHTML = icon; 
 cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>'; 
 cells(1).calssName = "indentWord" 
 
 cells(2).className = "menutd1"; 
 cells(2).innerHTML = "4"; 
 
 cells(3).className = "menutd2"; 
 cells(3).innerText = " "; 
 
 } 
 
 
 
 document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>'); 
 
 
 
} 
//---------------- 生成连接 makeLink 方法 ------------// 
function makeLink(subID,oldID,word,icon,url,target,thetitle) 
{ 
 
 
 var thelink = ''; 
 
 if(icon&&icon!="") 
 { 
 icon = ''; 
 } 
 else 
 { 
 icon = ''; 
 } 
 
 if(!thetitle||thetitle=="") 
 { 
 thetitle = ''; 
 } 
 
 
 if(url&&url!="") 
 { 
 thelink += ''; 
 } 
 
 var Oobj = document.getElementById(oldID); 
 
 
 /*--------------------------------------------- 连接html样式 
 
 <tr class="menutrout" id="trMenu_one_0" title="I am title"> 
 <td class="menutd0"></td> 
 <td><nobr>连接一</nobr></td> 
 <td class="linktd1"></td> 
 <td class="menutd2"> </td> 
 </tr> 
 
 --------------------------------------------------*/ 
 
 Oobj.insertRow(); 
 
 with(Oobj.rows(Oobj.rows.length-1)) 
 { 
 id = "tr"+subID; 
 className = "menutrout"; 
 title = thetitle; 
 } 
 
 eventObj = "tr"+subID; 
 
 eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))'); 
 eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))'); 
 eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))'); 
 
 var trObj = eval(eventObj); 
 for(i=0;i<4;i++) 
 { 
 trObj.insertCell(); 
 } 
 with(Oobj.rows(Oobj.rows.length-1)) 
 { 
 cells(0).className = "menutd0"; 
 cells(0).innerHTML = icon; 
 cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>'; 
 cells(2).className = "linktd1"; 
 cells(2).innerText = " "; 
 
 cells(3).className = "menutd2"; 
 cells(3).innerText = " "; 
 
 } 
} 
//-------------- 菜单对象 addMenu 方法 ------------// 
function addMenu(word,icon,url,target,title) 
{ 
 var subID = this.id + "_" + this.length; 
 var subObj = this.obj+"["+this.length+"]"; 
 
 var oldID = this.id; 
 
 eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')"); 
 
 makeMenu(subID,oldID,word,icon,url,target,title); 
 this.length++; 
 
} 
//------------- 菜单对象 addLink 方法 -------------// 
function addLink(word,icon,url,target,title) 
{ 
 var subID = this.id + "_" + this.length; 
 var oldID = this.id; 
 
 makeLink(subID,oldID,word,icon,url,target,title); 
 this.length++; 
} 
//------------ 菜单对象 addHR 方法 -----------------// 
function addHR() 
{ 
 var oldID = this.id; 
 var Oobj = document.getElementById(oldID); 
 
 Oobj.insertRow(); 
 
 /*------------------------------------------ 
 
 <tr> 
 <td colspan="4"> 
 <hr class="menuhr" size="1" width="95%"> 
 </td> 
 </tr> 
 
 --------------------------------------------*/ 
 
 Oobj.rows(Oobj.rows.length-1).insertCell(); 
 with(Oobj.rows(Oobj.rows.length-1)) 
 { 
 cells(0).colSpan= 4; 
 cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">'); 
 } 
 
} 
//--------- MtrOver(obj)-------------------// 
function MtrOver(obj) 
{ 
 return sub_over; 
 
 function sub_over() 
 { 
 
 var sonid = obj.id.substring(2,obj.id.length); 
 
 var topobj = obj.parentElement.parentElement; 
 
 NowSubMenu = topobj.id; 
 
 if(obj.className=="menutrout") 
 { 
 mouseWave(); 
 } 
 
 HideMenu(1); 
 
 SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu; 
 ShowTheMenu(sonid,MPreturn(sonid)) 
 
 SubMenuList[returnIndex(obj.id)] = sonid; 
 
 if(topobj.oldTR) 
 { 
 eval(topobj.oldTR+'.className = "menutrout"'); 
 } 
 obj.className = "menutrin"; 
 topobj.oldTR = obj.id; 
 
 } 
} 
//--------- LtrOver(obj)-------------------// 
function LtrOver(obj) 
{ 
 return sub_over; 
 
 function sub_over() 
 { 
 var topobj = obj.parentElement.parentElement; 
 NowSubMenu = topobj.id; 
 
 HideMenu(1); 
 
 SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu; 
 
 if(topobj.oldTR) 
 { 
 eval(topobj.oldTR+'.className = "menutrout"'); 
 } 
 obj.className = "menutrin"; 
 topobj.oldTR = obj.id; 
 } 
} 
//--------- LtrOut(obj)-------------------// 
function LtrOut(obj) 
{ 
 return sub_out; 
 
 function sub_out() 
 { 
 var topobj = obj.parentElement.parentElement; 
 
 obj.className = "menutrout"; 
 
 topobj.oldTR = false; 
 } 
} 
//----------MtrClick(obj)-----------------// 
function MtrClick(obj) 
{ 
 return sub_click; 
 
 function sub_click() 
 { 
 if(obj.cells(1).all.tags("A").length>0) 
 { 
 obj.cells(1).all.tags("A")(0).click(); 
 } 
 } 
} 
//---------- returnIndex(str)--------------// 
function returnIndex(str) 
{ 
 return (str.split("_").length-3) 
} 
//---------ShowTheMenu(obj,num)-----------------// 
function ShowTheMenu(obj,num) 
{ 
 var topobj = eval(obj.substring(0,obj.length-2)); 
 
 var trobj = eval("tr"+obj); 
 
 var obj = eval(obj); 
 
 if(num==0) 
 { 
 with(obj.style) 
 { 
 pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth; 
 pixelTop = topobj.style.pixelTop + trobj.offsetTop; 
 } 
 } 
 if(num==1) 
 { 
 with(obj.style) 
 { 
 pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth; 
 pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight; 
 } 
 } 
 if(num==2) 
 { 
 with(obj.style) 
 { 
 pixelLeft = topobj.style.pixelLeft - obj.offsetWidth; 
 pixelTop = topobj.style.pixelTop + trobj.offsetTop; 
 } 
 } 
 if(num==3) 
 { 
 with(obj.style) 
 { 
 pixelLeft = topobj.style.pixelLeft - obj.offsetWidth; 
 pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight; 
 } 
 } 
 
 obj.style.visibility = "visible"; 
 
 if(obj.alphaing) 
 { 
 clearInterval(obj.alphaing); 
 } 
 
 obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed); 
} 
//----------HideMenu(num)-------------------// 
/*---------------------- 
var SubMenuList = new Array(); 
var NowSubMenu = ""; 
---------------------*/ 
function HideMenu(num) 
{ 
 var thenowMenu = ""; 
 
 var obj = null; 
 
 if(num==1) 
 { 
 thenowMenu = NowSubMenu 
 } 
 
 
 
 for(i=SubMenuList.length-1;i>=0;i--) 
 { 
 if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu) 
 { 
 
 obj = eval(SubMenuList[i]); 
 
 if(obj.alphaing) 
 { 
 clearInterval(obj.alphaing); 
 } 
 obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed); 
 
 obj.style.visibility = "hidden"; 
 
 eval("tr"+SubMenuList[i]).className = "menutrout"; 
 
 SubMenuList[i] = null; 
 } 
 else 
 { 
 if(SubMenuList[i]==thenowMenu) 
 { 
 return; 
 } 
 } 
 } 
 
 NowSubMenu = ""; 
} 
//-----------MainMenuPosition return()------------// 
function MMPreturn() 
{ 
 var obj = eval(JustMenuID); 
 
 var x = event.clientX; 
 var y = event.clientY; 
 
 var judgerX = x + obj.offsetWidth; 
 var judgerY = y + obj.offsetHeight; 
 var px = 0; 
 var py = 0; 
 
 if(judgerX>document.body.clientWidth) 
 { 
 px = 2; 
 } 
 if(judgerY>document.body.clientHeight) 
 { 
 py = 1; 
 } 
 
 return (px+py); 
} 
//-----------MenuPosition return(obj)--------------// 
function MPreturn(obj) 
{ 
 var topobj = eval(obj.substring(0,obj.length-2)); 
 
 var trobj = eval("tr"+obj); 
 
 var x = topobj.style.pixelLeft + topobj.offsetWidth; 
 var y = topobj.style.pixelTop + trobj.offsetTop; 
 obj = eval(obj); 
 
 var judgerY = obj.offsetHeight + y; 
 var judgerX = obj.offsetWidth + x; 
 
 var py = 0; 
 var px = 0; 
 
 if(judgerY>=document.body.clientHeight) 
 { 
 py = 1; 
 } 
 
 if(judgerX>= document.body.clientWidth) 
 { 
 px = 2; 
 } 
 
 return (px+py); 
} 
//-----------mouseWave()-------------// 
function mouseWave() 
{ 
 if(mouseCanSound) 
 { 
 theBS.src= "sound/sound.wav"; 
 } 
} 
//----------- menu_alpha_down -------// 
function menu_alpha_down(obj,num) 
{ 
 var obj = eval(obj); 
 
 if(obj.filters.Alpha.Opacity > 0 ) 
 { 
 obj.filters.Alpha.Opacity += -num; 
 } 
 else 
 { 
 clearInterval(obj.alphaing); 
 obj.filters.Alpha.Opacity = 0; 
 obj.alphaing = false; 
 obj.style.visibility = "hidden"; 
 } 
} 
//------------ menu_alpha_up --------// 
function menu_alpha_up(obj,num) 
{ 
 var obj = eval(obj); 
 
 if(obj.filters.Alpha.Opacity<100) 
 obj.filters.Alpha.Opacity += num; 
 else 
 { 
 clearInterval(obj.alphaing); 
 obj.filters.Alpha.Opacity = 100; 
 obj.alphaing = false; 
 } 
} 
//----------- IE ContextMenu -----------------// 
function document.oncontextmenu() 
{ 
 return false; 
} 
//----------- IE Mouseup ----------------// 
function document.onmouseup() 
{ 
 if(event.button==2) 
 { 
 
 HideMenu(0); 
 
 var obj = eval(JustMenuID) 
 
 
 obj.style.visibility = "hidden"; 
 
 
 if(obj.alphaing) 
 { 
 clearInterval(obj.alphaing); 
 } 
 
 obj.filters.Alpha.Opacity = 0; 
 
 var judger = MMPreturn() 
 
 if(judger==0) 
 { 
 with(obj.style) 
 { 
 pixelLeft = event.clientX + document.body.scrollLeft; 
 pixelTop = event.clientY + document.body.scrollTop; 
 } 
 } 
 if(judger==1) 
 { 
 with(obj.style) 
 { 
 pixelLeft = event.clientX + document.body.scrollLeft; 
 pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop; 
 } 
 } 
 if(judger==2) 
 { 
 with(obj.style) 
 { 
 pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft; 
 pixelTop = event.clientY + document.body.scrollTop; 
 } 
 } 
 if(judger==3) 
 { 
 with(obj.style) 
 { 
 pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft; 
 pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop; 
 } 
 } 
 
 mouseWave(); 
 
 obj.style.visibility = "visible"; 
 
 obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed); 
 
 
 } 
} 
//---------- IE MouseDown --------------// 
function document.onmousedown() 
{ 
 if(event.button==1) 
 { 
 HideMenu(); 
 
 var obj = eval(JustMenuID) 
 
 if(obj.alphaing) 
 { 
 clearInterval(obj.alphaing); 
 } 
 
 obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed); 
 
 } 
} 
//-----> 
 
 
 var one = new MouseMenu("one"); 
 
 one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title"); 
 one[0].addLink("连接一",2,"javascript:alert('I am link')") 
 one[0].addHR() 
 one[0].addLink("连接二","","javascript:alert('I am link')") 
 one[0].addMenu("菜单三"); 
 one[0][one[0].length-1].addLink("连接一",1,"javascript:;") 
 one[0].addLink("连接三","","javascript:alert('I am link')") 
 one[0].addLink("连接四","","javascript:alert('I am link')") 
 one.addLink("连接二","","javascript:alert('I am link')") 
 one.addMenu("菜单二",3); 
 one[2].addLink("连接一","","javascript:alert('I am link')") 
 one.addHR(); 
 one.addLink("连接三，多长都可以",4,"javascript:alert('I am link')") 
 
 
<P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false; 
就可以了</P></BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部频道

js实现的XP风格的右键菜单_导航菜单