JavaScript下拉菜单，1

2023-11-05 03:54•javascript•阅读 1484

// JavaScript Document

//--------------- 主导航条内容 ------------//

var mainLayer = new Array("Home","About US","Our Service","News","Online Service","Online Quote","Customer","Link Info","Contact US","Employee");

var mainLayerImg = new Array(

new Array("<img src=\"images/button_black_01.gif\" name=\"Image3\" 0\">"),

new Array("<img src=\"images/button_black_02.gif\" name=\"Image4\" 0\">"),

new Array("<img src=\"images/button_black_03.gif\" name=\"Image5\" 0\">"),

new Array("<img src=\"images/button_black_04.gif\" name=\"Image6\" 0\">"),

new Array("<img src=\"images/button_black_05.gif\" name=\"Image7\" 0\">"),

new Array("<img src=\"images/Online Quote.GIF\" name=\"Image12\" 0\">"),

new Array("<img src=\"images/button_black_06.gif\" name=\"Image8\" 0\">"),

new Array("<img src=\"images/button_black_07.gif\" name=\"Image9\" 0\">"),

new Array("<img src=\"images/button_black_08.gif\" name=\"Image10\" 0\">"),

new Array("<img src=\"images/Employee.GIF\" name=\"Image11\" 0\">")

);

var mainLayerHttp = new Array("index.jsp","about.jsp","#","news.jsp","http://220.228.203.222:8099/VMI/index.jsp","#","#","#","cu.jsp","#");

var mainLayerTarget = new Array("","","","","_blank","","","","","");

var mainLayerOnMouseOver = new Array(

new Array("MM_swapImage('Image3','','images/button_blue_01.gif',1)"),

new Array("MM_swapImage('Image4','','images/button_blue_02.gif',1)"),

new Array("MM_swapImage('Image5','','images/button_blue_03.gif',1)"),

new Array("MM_swapImage('Image6','','images/button_blue_04.gif',1)"),

new Array("MM_swapImage('Image7','','images/button_blue_05.gif',1)"),

new Array("MM_swapImage('Image12','','images/Online Quote-blue.GIF',1)"),

new Array("MM_swapImage('Image8','','images/button_blue_06.gif',1)"),

new Array("MM_swapImage('Image9','','images/button_blue_07.gif',1)"),

new Array("MM_swapImage('Image10','','images/button_blue_08.gif',1)"),

new Array("MM_swapImage('Image11','','images/Employee-blue.GIF',1)")

);

var mainTableTdWidth = new Array(64,93,115,70,126,122,102,63,102,102);

//--------------- 次导航条内容 ------------//

var subLayer0 = new Array();

var subLayerHttp0 = new Array();

var subLayerTarget0 = new Array();

var subLayer1 = new Array();

var subLayerHttp1 = new Array();

var subLayerTarget1 = new Array();

var subLayer2 = new Array("Air Export","Air Import","Sea Freight","Domestic","Logistics","Hub");

var subLayerHttp2 = new Array(

new Array("sos.jsp?part=AirExport"),

new Array("sos.jsp?part=AirImport"),

new Array("sos.jsp?part=SeaFreight"),

new Array("sos.jsp?part=Domestic"),

new Array("sos.jsp?part=Logistics"),

new Array("sos.jsp?part=Hub")

);

var subLayerTarget2 = new Array();

var subLayer3 = new Array();

var subLayerHttp3 = new Array();

var subLayerTarget3 = new Array();

var subLayer4 = new Array();

var subLayerHttp4 = new Array();

var subLayerTarget4 = new Array();

var subLayer5 = new Array();

var subLayerHttp5 = new Array();

var subLayerTarget5 = new Array();

var subLayer6 = new Array("VMI","Tracking");

var subLayerHttp6 = new Array("http://220.228.203.222:8099/VMI/Login.htm","http://www.lsphub.com/symaton_top/tracking.jsp");

var subLayerTarget6 = new Array("_blank","_blank");

var subLayer7 = new Array();

var subLayerHttp7 = new Array();

var subLayerTarget7 = new Array();

var subLayer8 = new Array("Taipei","Taichung","Tainan","Kaohsiung","HongKong","Fuzhou","Xiamen","Guangzhou","Shanghai","Quanzhou","Toronto");

var subLayerHttp8 = new Array();

for (var i = 0;i <subLayer8.length;i++){

subLayerHttp8[i] = "cu.jsp?part=" + encodeURIComponent(subLayer8[i]);

}

var subLayerTarget8 = new Array();

var subLayer9 = new Array("Opinion","Bulletin");

var subLayerHttp9 = new Array("#","#");

var subLayerTarget9 = new Array();

//--------------- 主导航条Table参数调整 ------------//

//var mainTableTdWidth=100; //每个TD的宽度，调整主导航内容间距

var mainTableBorder=0; //调整主导航表格边框宽度

var mainTableCellspacing=0; //调整主导航表格Cellspacing

var mainTableCellpadding=0; //调整主导航表格Cellpadding

var mainTableBgcolor="#000000"; //调整主导航表格背景色

var mainTableBordercolor=""; //调整主导航表格编框颜色

var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址

var mainTableHrefClassName="link" //调整url风格样式

var mainTableTdBgcolor="#999999"; //调整主导航表格Td色

//--------------- 次导航条Table参数调整 ------------//

var subTableBorder=0; //调整次导航条表格边框宽度

var subTableCellspacing=0; //调整次导航条表格Cellspacing

var subTableCellpadding=1; //调整次导航条表格Cellpadding

var subTableBgcolor="#000000"; //调整次导航条表格背景色

var subTableBordercolor=""; //次导航条表格编框颜色

var subTableBackgroundImg=""; //次导航条表格背景图片url地址

var subTableTdBgcolor="#CCCCCC"; //调整次导航表格Td色

var subTableTop=30; //次导航表格上下微调

var subTableLeft=-1; //次导航表格左右微调

var subTableHrefClassName = "L-gray-12-03";

//--------------- 系统参数*请勿调整 ------------//

var layerMax=mainLayer.length+10;

var layerName="index";

//--------------- 生成下拉菜单 ------------//

function createMainLayer(){

document.write("<table visible','"+layerMax+"') ><table width="+mainLayer.length*mainTableTdWidth+" +mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");

for(i=0;i<mainLayer.length;i++){

document.write("<td nowrap width='"+mainTableTdWidth[i]+"' bgcolor='"+mainTableTdBgcolor+"' class='"+mainTableHrefClassName+"' onmouseover=layervib('visible','"+i+"')><a href='"+mainLayerHttp[i]+"' target='"+mainLayerTarget[i]+"' onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\""+mainLayerOnMouseOver[i]+"\" title=\""+mainLayer[i]+"\">"+mainLayerImg[i]+"</a></td>");

}

document.write("</tr></table>");

for(j=0;j<mainLayer.length;j++){

createSubLayer(j);

}

document.write("</div></td></tr></table>");

}

//--------------- 生成每项下拉菜单内容 ------------//

function createSubLayer(num){

var subLayerName= layerName +num;

var subLayerLeftTotal = 0;

for (var j = 0;j < num;j++){

subLayerLeftTotal += mainTableTdWidth[j];

}

var subLayerLeft=subLayerLeftTotal+mainTableCellpadding+mainTableBorder;

var subLayerList=eval("subLayer"+num);

var subLayerHttpList=eval("subLayerHttp"+num);

var subLayerTargetList=eval("subLayerTarget"+num);

var target;

document.write("<div +subLayerName+"' +(subLayerLeft+subTableLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+subTableTop)+"px; z-index:2; height: 24px; visibility: hidden' onmouseover=layervib('visible','"+num+"') onmouseout=layervib('visible','"+layerMax+"')>");

if(subLayerList.length!=0){

document.write("<table width='"+mainTableTdWidth[num]+"' +subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'")

for(h=0;h<subLayerList.length;h++){

target = subLayerTargetList[h];

target = target==null?"_self":target;

document.write("<tr><td bgColor='"+subTableTdBgcolor+"' width='100%' class='link' align='left' onMouseOver='this.bgColor=\"#3399FF\"' onMouseOut='this.bgColor=\""+subTableTdBgcolor+"\"'> <a href='"+ subLayerHttpList[h]+"' class='"+subTableHrefClassName+"' target='"+target+"'>"+subLayerList[h]+"</a> </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

};

}

上一篇 »微软 Excel 365 里如何设置下拉菜单和自动高亮成指定颜色
下一篇 »css+javascript下拉菜单

JavaScript下拉菜单，1

相关推荐

CSS垂直树形下拉菜单

关于css菜单用dl造成的隐式假死

JavaScript修改src

利用stringBuilder操作html文件

JavaScript DOM操作案例点击按钮选择菜单

实现html中select下拉列表中部分选项不可选

css倒三角的几种实现方式？

html 表单笔记