JS制作下拉菜单

将以下代码制作成JS文件：DownMenu.js

//--------------- 主导航条内容 ------------// var mainLayer=new Array("主导航栏目");//主导航栏目

//--------------- 次导航条内容 ------------// var subLayer0=new Array("下拉菜单项1","下拉菜单项2"); //导航栏目一下的次级栏目 var subLayerHttp0=new Array("Caidan1.asp","Caidan2.asp");//主导航栏目一下的次级栏目连接地址 //var subLayer1=new Array("下拉菜单项1","下拉菜单项2");//导航栏目二的次级栏目 //var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址

//--------------- 主导航条Table参数调整 ------------// var mainTableTdWidth=58; //每个TD的宽度，调整主导航内容间距 var mainTableBorder=0; //调整主导航表格边框宽度 var mainTableCellspacing=0; //调整主导航表格Cellspacing var mainTableCellpadding=1; //调整主导航表格Cellpadding var mainTableBgcolor=""; //调整主导航表格背景色 var mainTableBordercolor=""; //调整主导航表格编框颜色 var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址 var hrefClassName="link" //调整url风格样式 var mainTableTdBgcolor=""; //调整主导航表格Td色

//--------------- 次导航条Table参数调整 ------------// var subTableBorder=0; //调整次导航条表格边框宽度 var subTableCellspacing=0; //调整次导航条表格Cellspacing var subTableCellpadding=1; //调整次导航条表格Cellpadding var subTableBgcolor="#000000"; //调整次导航条表格背景色 var subTableBordercolor=""; //次导航条表格编框颜色 var subTableBackgroundImg=""; //次导航条表格背景图片url地址 var subTableTdBgcolor="E5F0FA"; //调整次导航表格Td色 var sbuTabbleTop=15; //次导航表格上下微调  原来：21 var sbuTabbleLeft=-1; //次导航表格左右微调

//--------------- 系统参数*请勿调整 ------------// var layerMax=mainLayer.length+10; var layerName="index";

//--------------- 生成下拉菜单 ------------// function createMainLayer(){ document.write("<table border=0 cellspacing=0 cellpadding=0><tr><td align='center'><div align='center' id='wall' οnmοuseοut=layervib('visible','"+layerMax+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>"); for(i=0;i<mainLayer.length;i++){ document.write("<td width='"+mainTableTdWidth+"' bgcolor='"+mainTableTdBgcolor+"' class='"+hrefClassName+"' οnmοuseοver=layervib('visible','"+i+"')>&nbsp;<a href='#'>"+mainLayer[i]+"</a></td>"); } document.write("</tr></table>");

for(j=0;j<mainLayer.length;j++){ createSubLayer(j); } document.write("</div></table></td></tr></table>"); }

//--------------- 生成每项下拉菜单内容 ------------// function createSubLayer(num){ var subLayerName= layerName +num; var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder; var subLayerList=eval("subLayer"+num); var subLayerHttpList=eval("subLayerHttp"+num); document.write("<div id='"+subLayerName+"' style='position:absolute; left:"+(subLayerLeft+sbuTabbleLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+sbuTabbleTop)+"px; z-index:2; height: 24px; visibility: hidden' οnmοuseοver=layervib('visible','"+num+"') οnmοuseοut=layervib('visible','"+layerMax+"')>"); if(subLayerList.length!=0){ document.write("<table width='65px' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'") for(h=0;h<subLayerList.length;h++){

document.write("<tr><td bgcolor='"+subTableTdBgcolor+"' width='100%' class='link'>&nbsp;<a href='"+ subLayerHttpList [h]+"' class='link'>"+subLayerList[h]+"</a>&nbsp;</td></tr>"); } document.write("</table>"); } document.write("</div>");

}

//------------------------------次菜单显隐控制--------------------------// function layervib(type,num){ var H=type; var temp=(H='visible'?'hidden':'visible') for(var i=0;i<mainLayer.length;i++){ var E=eval('document.all.index'+i+'.style'); var H=eval(i); if(i==num){E.visibility=type}else{E.visibility=temp}; } }

在需要使用下拉菜单的地方，用入下代码载入JS文件

<script language="javascript" src="DownMenu.js"></script>

最后在需要显示下拉菜单的地方写如下代码：

<script language="javascript">createMainLayer()</script>

以上就实现了一个简单的下拉菜单。