上次在论坛里看到前辈的xp菜单，看起来很不错，但是那段生成菜单的script一放到层，表格，或者<div></div>之间时就会出现无法打开internet站点。。。。。，已终止操作的错误
直接放在<body>内就没有事。代码如下：
<!--
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE style=text/css>
.menutableT {
BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #307ce8 5px solid; BORDER-BOTTOM: #307ce8 1px solid; BACKGROUND-COLOR: #ffffff
}
.menutable {
BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; Z-INDEX: 100; BORDER-LEFT: #307ce8 5px solid; BORDER-BOTTOM: #307ce8 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.menutrin {
CURSOR: hand; COLOR: #ffffff; BACKGROUND-COLOR: #1a71e6
}
.menutrout {
CURSOR: hand; COLOR: #000000
}
.menutd0 {
WIDTH: 28px; HEIGHT: 25px; TEXT-ALIGN: center; 改变这个修改菜单高度---:
}
.menutd1 {
WIDTH: 50px; FONT-FAMILY: Webdings; TEXT-ALIGN: right
}
.linktd1 {
WIDTH: 46px
}
.menutd2 {
WIDTH: 4px
}
.menuhr {
BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-BOTTOM: #307ce8 1px inset
}
.indentWord {
PADDING-LEFT: 2px
}
body{
FONT-SIZE: 12px;
}
</STYLE>
<BGSOUND id=theBS src="" loop=0>
<META content="MSHTML 6.00.3790.0" name=GENERATOR>
</HEAD>
<BODY>
<SCRIPT>
/*--------------------------------------------
管理样式多级菜单 1.0 制作 Stroll
--------------------------------------------*/
//--------------- 有关数据 -----------------//
var IconList = new Array(); // icon图片 集合， 下标从 1 开始
IconList[1] = new Image();
IconList[1].src = "upfiles/edit.gif";
//---------------- 检测变量 菜单的显示隐藏就靠它了！！！ ------------------//
var SubMenuList = new Array();
var NowSubMenu = "";
var mouseCanSound = true; //--------------------------- 声音开关 ------ 声音开关 ------------------//
var menuSpeed = 50; //---------- 菜单显示速度 ------------//
var alphaStep = 30; //---------- Alpaha 变化 度 -----------//
//------------- 构建 顶部菜单 对象 -------------//
function TopMenu(objName,L,T)
{
this.id = "Menu_"+objName;
this.obj = objName;
this.length = 0;
this.L = L
this.T = T
this.addTopMenu = addTopMenu;
this.addTopLink = addTopLink;
this.returnAll = returnAll
document.body.insertAdjacentHTML('afterBegin','<div id="temp_'+this.id+'" style="display: none;"><table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" class="menutableT" ><tr></tr></table></div>');
}
//----------returnAll----------------//
function returnAll(str)
{
var obj = eval("temp_"+this.id);
str = eval(str)
var tempstr = obj.innerHTML
obj.outerHTML = "";
str.insertAdjacentHTML('beforeEnd',tempstr)
}
//----------- 构建 子菜单 对象 -------------//
function SubMenu(objName,objID)
{
this.obj = objName;
this.id = objID;
this.addMenu = addMenu;
this.addLink = addLink;
this.addHR = addHR;
this.length = 0;
}
//-------------- 主菜单对象 addTopMenu 方法 ------------//
function addTopMenu(word,icon,title)
{
var subID = this.id + "_" + this.length;
var subObj = this.obj+"["+this.length+"]";
var oldID = this.id;
eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')"
;
makeTopMenu(subID,oldID,word,icon,title);
this.length++;
}
//------------- 主菜单对象 addTopLink 方法 -------------//
function addTopLink(word,icon,url,target,title)
{
var subID = this.id + "_" + this.length;
var oldID = this.id;
makeTopLink(subID,oldID,word,icon,url,target,title);
this.length++;
}
//-------------- 生成 菜单 makeTopMenu 方法 -----------//
function makeTopMenu(subID,oldID,word,icon,thetitle)
{
if(icon&&icon!=""
{
icon = '<img border="0" src="'+IconList[icon].src+'">';
}
else
{
icon = '';
}
if(!thetitle||thetitle==""
{
thetitle = '';
}
var Oobj = document.getElementById(oldID);
/*--------------------------------------------- 菜单html样式
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr class="menutrout" id="trMenu_one_0" title="I am title">
<td class="menutd0"><img src="upfiles/sub.gif" border="0" width="16" height="16"></td>
<td><nobr>菜单一</nobr></td>
<td class="menutd2"> </td>
</tr>
</table>
</td>
--------------------------------------------------*/
var TempTableStr = '<table border="0" cellspacing="0" cellpadding="0" style="font-size: 12px">'
+ '<tr class="menutrout" id="tr'+subID+'" onmousedown="TMtrClick(this)" onmouseover="MtrOver(this,1);this.MH=false" title="'+thetitle+'" onmouseup="event.cancelBubble=true">'
+ '<td class="menutd0">'+icon+'</td>'
+ '<td><nobr class=indentWord>'+word+'</nobr></td>'
+ '<td class="menutd2"> </td>'
+ '</tr></table>'
Oobj.rows(0).insertCell().innerHTML = TempTableStr
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" ></table>');
}
//---------------- 生成连接 makeTopLink 方法 ------------//
function makeTopLink(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="upfiles/sub.gif" border="0" width="16" height="16"></td>
<td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>
<td class="menutd2"> </td>
</tr>
--------------------------------------------------*/
var TempTableStr = '<table border="0" cellspacing="0" cellpadding="0" style="font-size: 12px">'
+ '<tr class="menutrout" id="tr'+subID+'" onmouseout="LtrOut(this,1)" onmouseover="LtrOver(this,1)" onclick="MtrClick(this,1)" title="'+thetitle+'">'
+ '<td class="menutd0">'+icon+'</td>'
+ '<td>'+thelink+'<nobr class=indentWord>'+word+'</nobr></td>'
+ '<td class="menutd2"> </td>'
+ '</tr></table>'
Oobj.rows(0).insertCell().innerHTML = TempTableStr
}
//*******************************************************************//
//-------------- 菜单对象 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%">');
}
}
//-------------- 生成 菜单 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="upfiles/sub.gif" border="0" width="16" height="16"></td>
<td><a href="javascript: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 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"></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="upfiles/sub.gif" border="0" width="16" height="16"></td>
<td><a href="javascript: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 class=indentWord>'+word+'</nobr>';
cells(2).className = "linktd1";
cells(2).innerText = " ";
cells(3).className = "menutd2";
cells(3).innerText = " ";
}
}
//--------- MtrOver(obj,isTop)-------------------//
function MtrOver(obj,isTop)
{
if(isTop)
{
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;
if(isTop)
{
ShowTheMenu(sonid,100)
}
else
{
ShowTheMenu(sonid,MPreturn(sonid))
}
SubMenuList[returnIndex(obj.id)] = sonid;
if(topobj.oldTR)
{
eval(topobj.oldTR+'.className = "menutrout"');
}
obj.className = "menutrin";
topobj.oldTR = obj.id;
}
else
{
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;
if(isTop)
{
ShowTheMenu(sonid,100)
}
else
{
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,isTop)-------------------//
function LtrOver(obj,isTop)
{
if(isTop)
{
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;
}
else
{
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,isTop)-------------------//
function LtrOut(obj,isTop)
{
if(isTop)
{
var topobj = obj.parentElement.parentElement;
obj.className = "menutrout";
topobj.oldTR = false;
}
else
{
return sub_out;
function sub_out()
{
var topobj = obj.parentElement.parentElement;
obj.className = "menutrout";
topobj.oldTR = false;
}
}
}
//----------MtrClick(obj,isTop)-----------------//
function MtrClick(obj,isTop)
{
if(isTop)
{
if(obj.cells(1).all.tags("A"
.length>0)
{
obj.cells(1).all.tags("A"
(0).click();
}
}
else
{
return sub_click;
function sub_click()
{
if(obj.cells(1).all.tags("A"
.length>0)
{
obj.cells(1).all.tags("A"
(0).click();
}
}
}
}
//----------TMtrClick(obj)-----------------//
function TMtrClick(obj)
{
if(obj.MH)
{
MtrOver(obj,1)
obj.MH = false;
}
else
{
document.onmouseup()
obj.MH = true;
}
}
//---------- 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 SrcObj = eval(topobj.id.split("_"
[1])
var ML = 0
if(SrcObj.L)
{
ML += eval(SrcObj.L)
}
var MT = 0
if(SrcObj.T)
{
MT += eval(SrcObj.T)
}
var trobj = eval("tr"+obj);
var obj = eval(obj);
var TheTDLeft = trobj.parentElement.parentElement.parentElement.offsetLeft;
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;
}
}
if(num==100)
{
with(obj.style)
{
pixelLeft = document.body.scrollLeft + topobj.offsetLeft + TheTDLeft + ML;
pixelTop = document.body.scrollTop + topobj.offsetTop + topobj.offsetHeight + MT;
}
}
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 = "";
}
//-----------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= "upfiles/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 mouseup --------//
function document.onmouseup()
{
HideMenu();
}
body>
</body>
<form>
<body>
<table>
<tr>
<td>
<SCRIPT>
var TM = new TopMenu("TM"
;
TM.addTopLink("首 页",1,"javascript:alert('首页')"
;
TM.addTopMenu("关于我们",1,"http://www.sina.com.cn"
;
TM[1].addLink("公司概况",0,"javascript:alert();"
;
TM[1].addLink("主营业务",0,"javascript:alert();"
;
TM[1].addLink("VI展示",0,"javascript:;"
;
TM.addTopMenu("解决方案",0,"javascript:alert()"
;
TM[2].addMenu("SAP",0,"javascript:alert();"
;
TM[2][0].addMenu("系统介绍",0,"javascript:;"
TM[2][0][0].addLink("SD",0,"javascript:;"
TM[2][0][0].addLink("FI",0,"javascript:;"
TM[2][0][0].addLink("PP",0,"javascript:;"
TM[2][0][0].addLink("MM",0,"javascript:;"
TM[2][0][0].addLink("BW",0,"javascript:;"
TM[2][0].addLink("成功案例",0,"javascript:;"
TM[2].addMenu("OA"
TM[2][1].addLink("DOMINO",0,"javascript:;"
TM[2][1].addLink("开发",0,"javascript:;"
TM[2][1].addLink("设计",0,"javascript:;"
TM[2][1].addLink("管理",0,"javascript:alert();"
TM[2][1].addLink("成功案例",0,"javascript:;"
TM[2].addMenu("WEB"
TM[2][2].addLink("成功案例",0,"javascript:;"
TM[2][2].addLink("技术优势",0,"javascript:;"
TM[2][2].addLink("服务体系",0,"javascript:;"
TM[2].addMenu("FAM"
TM[2][3].addLink("功能",0,"javascript:;"
TM[2][3].addLink("成功案例",0,"javascript:;"
TM[2].addMenu("软件开发"
TM[2][4].addLink("开发实力",0,"javascript:;"
TM[2][4].addLink("成功案例",0,"javascript:;"
TM.addTopMenu("服务与支持"
TM[3].addLink("技术文献库",0,"javascript:alert();"
TM[3].addMenu("社区",0,"javascript:;"
TM[3][1].addLink("论坛",0,"javascript:;"
TM[3][1].addLink("个人信息",0,"javascript:;"
TM[3][1].addLink("社区服务",0,"javascript:;"
TM[3].addLink("在线支持",0,"javascript:;"
TM.addTopMenu("下载与体验"
TM[4].addLink("软件下载区",1,"javascript:alert();"
TM[4].addMenu("会员体验区",0,"javascript:;"
TM[4][1].addLink("SAP初体验",0,"javascript:;"
TM[4][1].addLink("WorkPlace",0,"javascript:;"
TM[4][1].addLink("Web系统",0,"javascript:;"
TM[4][1].addLink("FAM",0,"javascript:alert();"
TM.addTopMenu("交流互动"
TM[5].addLink("项目招商",0,"javascript:alert();"
TM[5].addMenu("合作需求",0,"javascript:;"
TM[5][1].addLink("需求登记",0,"javascript:;"
TM[5][1].addLink("合作意向",0,"javascript:;"
TM[5].addLink("在线服务"
TM.returnAll("document.body"
//生成在 document.body里面
</SCRIPT>
</td>
</tr>
</table>
</div>
</body>
</form>
<br>
</body></HTML>
-->
正常的如： [url=]http://vip.5d.cn/flood/menu/xpmenu1.htm[/url]
但一将生成菜单的代码定位就出现上面的问题，不能使用table,div,span,等等，如何利用啊
