下拉菜单的制作

本代码是整个演示页的代码，不能直接插入网页中使用，请自行修改后再使用！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>XP菜单</title>
<style>
.menutableT
{
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;
}
.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: 50;
font-family: Webdings;
}
.linktd1
{
width: 46;
}
.menutd2
{
width: 4;
}
.menuhr
{
border: 1 inset #307CE8;
}
.indentWord
{
padding-left: 2px;
}

</style>
<bgsound src="" loop="0" id="theBS">
</head><body bgcolor="#E3E3E3" onselectstart="return false">
<script>
/*--------------------------------------------
管理样式多级菜单 1.0  制作 Stroll--------------------------------------------*///---------------  有关数据 -----------------//var IconList = new Array();   // icon图片集合，下标从 1 开始 IconList[1] = new Image();

IconList[1].src = "http://netroom.hbu.edu.cn/personal/stroll/icon/edit.gif";
//----------------  检测变量菜单的显示隐藏就靠它了！！！  ------------------//
var SubMenuList = new Array();var NowSubMenu = ""; var mouseCanSound = false;   //---------------------------  声音开关 ------  声音开关 ------------------//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="icon/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="icon/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="icon/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="icon/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= "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 mouseup --------//function document.onmouseup()
{
HideMenu();
}
</script>
   <script>
var TM = new TopMenu("TM")TM.addTopLink("hello",1,"javascript:alert()")
TM.addTopMenu("hello")
TM[1].addLink("hello",0,"javascript:alert();")
TM[1].addLink("hello",0,"javascript:;")
TM[1].addMenu("hello")
TM[1][2].addLink("hello",0,"javascript:;")
TM[1][2].addLink("hello",0,"javascript:;")
TM[1][2].addLink("hello",0,"javascript:;")
TM[1][2].addLink("hello",0,"javascript:;")
TM[1].addLink("hello",0,"javascript:;")
TM[1].addHR()
TM[1].addMenu("hello")
TM[1][4].addLink("hello",0,"javascript:;")
TM[1][4].addLink("hello",0,"javascript:;")
TM[1][4].addLink("hello",0,"javascript:;")
TM[1][4].addLink("hello",0,"javascript:;")
TM.addTopLink("hello",0,"javascript:alert()")
TM.addTopMenu("hello")
TM[3].addLink("hello",0,"javascript:alert();")
TM[3].addLink("hello",0,"javascript:;")
TM[3].addLink("hello",0,"javascript:;")
TM[3].addMenu("hello")
TM[3][3].addLink("hello",0,"javascript:;")
TM[3][3].addLink("hello",0,"javascript:;")
TM[3][3].addLink("hello",0,"javascript:;")
TM[3][3].addLink("hello",0,"javascript:alert();")
TM.returnAll("document.body")  //生成在 document.body里面
</script>
</body>

</html>

调试易

下拉菜单的制作

解决方案 »