右键导航菜单 [XP清新版]

楼主^#

更多发布于：2002-07-10 15:58

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mouse-menu</title>
<style>
.menutable
{
position: absolute;
z-index: 100;
border-left: 5 solid #307CE8;
border-right: 1 solid #307CE8;
border-top: 1 solid #94BCF3;
border-bottom: 1 solid #307CE8;
font-size: 12px;
background-color: #FFFFFF;
}
.menutrin
{
background-color: #1A71E6;
color: #FFFFFF;
cursor: hand;
}
.menutrout
{
color: #000000;
cursor: hand;
}
.menutd0
{
text-align: center;
width: 28;
height: 25; 
}
.menutd1
{
text-align: right;
width: 46;
font-family: Webdings;
}
.linktd1
{
width: 46;
}
.menutd2
{
width: 4;
}
.menuhr
{
border: 1 inset #307CE8;
}

</style>
<bgsound src="sound/sound.wav" loop="0" id="theBS">
</head>

<body style="font-size: 10pt" bgcolor="#EAF5FD">
<s cript>

</s cript>

<s cript>
var one = new MouseMenu("one");

one.addMenu("菜单一",1,"javas cript:alert('I am menu');","_self","I am title");
one[0].addLink("连接一","","javas cript:alert('I am link')")
one[0].addHR()
one[0].addLink("连接二","","javas cript:alert('I am link')")
one[0].addMenu("菜单三");
one[0][2].addLink("连接一",1,"javas cript:;")
one[0].addLink("连接三","","javas cript:alert('I am link')")
one[0].addLink("连接四","","javas cript:alert('I am link')")
one.addLink("连接二","","javas cript:alert('I am link')")
one.addMenu("菜单二");
one[2].addLink("连接一","","javas cript:alert('I am link')")
one.addHR();
one.addLink("连接三，多长都可以",1,"javas cript:alert('I am link')")

</s cript>
</body>

</html>

喜欢0

[img]http://wait4c.com/attachment/photo/Mon_0910/418e944c2600fd913b.gif[/img]

无缺

小有名气

铜币0枚
威望0点
贡献值0点

加关注写私信

1C^#

发布于：2002-07-11 21:46

Re：右键导航菜单 [XP清新版]

很多东西错了~~~

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>mouse-menu</title> 
<STYLE type=text/css>
.menutable 
{ 
position: absolute; 
z-index: 100; 
border-left: 5 solid #307CE8; 
border-right: 1 solid #307CE8; 
border-top: 1 solid #94BCF3; 
border-bottom: 1 solid #307CE8; 
font-size: 12px; 
background-color: #FFFFFF; 
} 
.menutrin 
{ 
background-color: #1A71E6; 
color: #FFFFFF; 
cursor: hand; 
} 
.menutrout 
{ 
color: #000000; 
cursor: hand; 
} 
.menutd0 
{ 
text-align: center; 
width: 28; 
height: 25; <!--改变这个修改菜单高度---> 
} 
.menutd1 
{ 
text-align: right; 
width: 46; 
font-family: Webdings; 
} 
.linktd1 
{ 
width: 46; 
} 
.menutd2 
{ 
width: 4; 
} 
.menuhr 
{ 
border: 1 inset #307CE8; 
} 

</style> 
<bgsound src="sound/sound.wav" loop="0" id="theBS"> 
</head> 

<body style="font-size: 10pt" bgcolor="#EAF5FD"> 
<script language="JavaScript">
<!--

/*----------------------------------------------------------- 
鼠标右键菜单 1.0 Designed By Stroll e-mail: [email protected] 


--------------------------------------------------------------*/ 

//--------------- 有关数据 -----------------// 

var IconList = new Array(); // icon图片 集合， 下标从 1 开始 

IconList[1] = new Image(); 

IconList[1].src = "icon/sub.gif"; 


//---------------- 检测变量 菜单的显示隐藏就靠它了！！！ ------------------// 

var JustMenuID = ""; 

var SubMenuList = new Array(); 

var NowSubMenu = ""; 

var mouseCanSound = true; //--------------------------- 声音开关 ------ 声音开关 ------------------// 

//------------- 构建 主菜单 对象 -------------// 

function MouseMenu(objName) 
{ 
this.id = "Menu_"+objName; 
this.obj = objName; 
this.length = 0; 


this.addMenu = addMenu; 
this.addLink = addLink; 
this.addHR = addHR; 

JustMenuID = this.id; 

document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; display: none;" 

class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></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 = '<img border="0" src="'+IconList[icon].src+'">'; 
} 
else 
{ 
icon = ''; 
} 

if(!thetitle||thetitle=="") 
{ 
thetitle = ''; 
} 


if(url&&url!="") 
{ 
thelink += '<a href="'+url+'" '; 

if(target&&target!="") 
{ 
thelink += ' '; 
thelink += 'target="'+target+'" ' 
} 

thelink += '></a>'; 
} 

var Oobj = document.getElementById(oldID); 

/*--------------------------------------------- 菜单html样式 

<tr class="menutrout" id="trMenu_one_0" title="I am title"> 
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td> 
<td><a href="javas cript:alert('I am menu');" target="_self"></a><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>'+word+'</nobr>'; 

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; display: none" 

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 = '<img border="0" src="'+IconList[icon].src+'">'; 
} 
else 
{ 
icon = ''; 
} 

if(!thetitle||thetitle=="") 
{ 
thetitle = ''; 
} 


if(url&&url!="") 
{ 
thelink += '<a href="'+url+'" '; 

if(target&&target!="") 
{ 
thelink += ' '; 
thelink += 'target="'+target+'" ' 
} 

thelink += '></a>'; 
} 

var Oobj = document.getElementById(oldID); 


/*--------------------------------------------- 连接html样式 

<tr class="menutrout" id="trMenu_one_0" title="I am title"> 
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td> 
<td><a href="javas cript:alert('I am link');" target="_self"></a><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>'+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; 

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 + WHreturn(topobj.id,2); 
pixelTop = topobj.style.pixelTop + trobj.offsetTop; 
} 
} 
if(num==1) 
{ 
with(obj.style) 
{ 
pixelLeft = topobj.style.pixelLeft + WHreturn(topobj.id,2); 
pixelTop = document.body.clientHeight - WHreturn(obj.id,1); 
} 
} 
if(num==2) 
{ 
with(obj.style) 
{ 
pixelLeft = topobj.style.pixelLeft - WHreturn(obj.id,2); 
pixelTop = topobj.style.pixelTop + trobj.offsetTop; 
} 
} 
if(num==3) 
{ 
with(obj.style) 
{ 
pixelLeft = topobj.style.pixelLeft - WHreturn(obj.id,2); 
pixelTop = document.body.clientHeight - WHreturn(obj.id,1); 
} 
} 

mouseWave(); 

obj.style.display = ""; 
} 

//----------HideMenu(num)-------------------// 

/*---------------------- 
var SubMenuList = new Array(); 

var NowSubMenu = ""; 

---------------------*/ 

function HideMenu(num) 
{ 
var thenowMenu = ""; 

if(num==1) 
{ 
thenowMenu = NowSubMenu 
} 

for(i=SubMenuList.length-1;i>=0;i--) 
{ 
if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu) 
{ 
eval(SubMenuList[i]).style.display = "none"; 
eval("tr"+SubMenuList[i]).className = "menutrout"; 

SubMenuList[i] = null; 
} 
else 
{ 
if(SubMenuList[i]==thenowMenu) 
{ 
return; 
} 
} 
} 

NowSubMenu = ""; 
} 


//---------- WHreturn(obj,num) 无奈的“杰作”----------------// 

function WHreturn(obj,num) 
{ 
obj = eval(obj); 

var trlist = obj.childNodes(0).childNodes 

var size = 0; 

if(num==1) 
{ 
for(i=0;i<trlist.length;i++) 
{ 
size += parseInt(trlist(i).offsetHeight); 
} 

return(size) 
} 
if(num==2) 
{ 
size += parseInt(trlist(0).offsetWidth); 

return(size) 
} 
} 


//-----------MainMenuPosition return()------------// 

function MMPreturn() 
{ 
var obj = eval(JustMenuID); 

var x = event.clientX; 
var y = event.clientY; 

var judgerX = x + WHreturn(JustMenuID,2); 
var judgerY = y + WHreturn(JustMenuID,1); 

//######################################################################## 看这里！！ 怎样得到 height ? ################### 
//alert(obj.offsetWidth) 

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 = WHreturn(obj.id,1) + y; 
var judgerX = WHreturn(obj.id,2) + 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"; 
} 
} 


//----------- IE ContextMenu -----------------// 

function document.oncontextmenu() 
{ 
return false; 
} 


//----------- IE Mouseup ----------------// 

function document.onmouseup() 
{ 
if(event.button==2) 
{ 

HideMenu(0); 

var obj = eval(JustMenuID) 


obj.style.display = "none"; 

var judger = MMPreturn() 

if(judger==0) 
{ 
with(obj.style) 
{ 
pixelLeft = event.clientX; 
pixelTop = event.clientY; 
} 
} 
if(judger==1) 
{ 
with(obj.style) 
{ 
pixelLeft = event.clientX; 
pixelTop = event.clientY - WHreturn(JustMenuID,1); 
} 
} 
if(judger==2) 
{ 
with(obj.style) 
{ 
pixelLeft = event.clientX - WHreturn(JustMenuID,2); 
pixelTop = event.clientY; 
} 
} 
if(judger==3) 
{ 
with(obj.style) 
{ 
pixelLeft = event.clientX - WHreturn(JustMenuID,2); 
pixelTop = event.clientY - WHreturn(JustMenuID,1); 
} 
} 

mouseWave(); 

obj.style.display = ""; 


} 
} 

//---------- IE MouseDown --------------// 

function document.onmousedown() 
{ 
if(event.button==1) 
{ 
HideMenu(); 

var obj = eval(JustMenuID) 

with(obj.style) 
{ 
display = "none"; 
} 

} 
} 
//-->
</script>
<script language="JavaScript">
<!--
var one = new MouseMenu("one"); 

one.addMenu("菜单一",1,"javas cript:alert('I am menu');","_self","I am title"); 
one[0].addLink("连接一","","javas cript:alert('I am link')") 
one[0].addHR() 
one[0].addLink("连接二","","javas cript:alert('I am link')") 
one[0].addMenu("菜单三"); 
one[0][2].addLink("连接一",1,"javas cript:;") 
one[0].addLink("连接三","","javas cript:alert('I am link')") 
one[0].addLink("连接四","","javas cript:alert('I am link')") 
one.addLink("连接二","","javas cript:alert('I am link')") 
one.addMenu("菜单二"); 
one[2].addLink("连接一","","javas cript:alert('I am link')") 
one.addHR(); 
one.addLink("连接三，多长都可以",1,"javas cript:alert('I am link')") 

//-->
</script>
</body> 

</html>

-------------------- [IMG]http://www.oxdns.com/Sources/Images/oxdns_04.gif[/IMG]

视觉中国-[a]http://www.ChinaVisual.com[/a]

[IMG]http://www.oxdns.com/Sources/Images/oxdns_04.gif[/IMG] 视觉中国-[a]http://www.ChinaVisual.com[/a]

回复喜欢

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

右键导航菜单 [XP清新版]

最新喜欢：