随着互联网的普及和网页制作技术的发展，越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么，在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。
1、S下拉菜单原理
下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）。当触发条件（例如：鼠标移动到上面时）显示次级菜单（图二）。
图一
图二
那么如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候，其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件（例如：鼠标移动到上面）时，在使用javascript来控制次级菜单显示。当在次满足触发条件时（例如：鼠标移开），控制次级菜单隐藏。
我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。
2、"自适应分辨率可扩展二层JS下拉菜单"js代码详解
//---------------主导航条内容------------//
varmainLayer=newArray("蓝色理想","动意营造");//主导航栏目
//---------------次导航条内容------------//
varsubLayer0=newArray("论坛","文献");//导航栏目一下的次级栏目
varsubLayerHttp0=newArray("#","#");//主导航栏目一下的次级栏目连接地址
varsubLayer1=newArray("论坛","文献");//导航栏目二的次级栏目
varsubLayerHttp1=newArray("#","#");//主导航栏目二的次级栏目连接地址
//---------------主导航条Table参数调整------------//
varmainTableTdWidth=100;//每个TD的宽度，调整主导航内容间距
varmainTableBorder=0;//调整主导航表格边框宽度
varmainTableCellspacing=0;//调整主导航表格Cellspacing
varmainTableCellpadding=1;//调整主导航表格Cellpadding
varmainTableBgcolor="#000000";//调整主导航表格背景色
varmainTableBordercolor="";//调整主导航表格编框颜色
varmainTableBackgroundImg="";//调整主导航表格背景图片url地址
varhrefClassName="link"//调整url风格样式
varmainTableTdBgcolor="B2CBCF";//调整主导航表格Td色
//---------------次导航条Table参数调整------------//
varsubTableBorder=0;//调整次导航条表格边框宽度
varsubTableCellspacing=0;//调整次导航条表格Cellspacing
varsubTableCellpadding=1;//调整次导航条表格Cellpadding
varsubTableBgcolor="#000000";//调整次导航条表格背景色
varsubTableBordercolor="";//次导航条表格编框颜色
varsubTableBackgroundImg="";//次导航条表格背景图片url地址
varsubTableTdBgcolor="B2CBCF";//调整次导航表格Td色
varsbuTabbleTop=21;//次导航表格上下微调
varsbuTabbleLeft=-1;//次导航表格左右微调
//---------------系统参数*请勿调整------------//
varlayerMax=mainLayer.length 10;
varlayerName="index";
//---------------生成下拉菜单------------//
functioncreateMainLayer(){
document.write("");
for(i=0;i
" mainLayer[i] "
");
}
document.write("");
for(j=0;j");
}
//---------------生成每项下拉菜单内容------------//
functioncreateSubLayer(num){
varsubLayerName=layerName num;
varsubLayerLeft=(mainTableTdWidth*num) mainTableCellpadding mainTableBorder;
varsubLayerList=eval("subLayer" num);
varsubLayerHttpList=eval("subLayerHttp" num);
document.write("");
if(subLayerList.length!=0){
document.write(" " subLayerList[h] " ");
}
document.write("");
}
document.write("");
}
//------------------------------次菜单显隐控制--------------------------//
functionlayervib(type,num){
varH=type;
vartemp=(H='visible'?'hidden':'visible')
for(vari=0;i
(4)、如何添加新的主菜单及次级菜单的栏目。
假设我们要在已有的栏目里新增加一个“七色鸟”栏目。下面有“论坛”和“文献”两个次级栏目。那么我么首先要在代码的如下部分添加“七色鸟”。
varmainLayer=newArray("蓝色理想","动意营造","七色鸟");//主导航栏目
012
然后在如下的位置添加“论坛”和“文献”栏目及连接地址。
varsubLayer0=newArray("论坛","文献");//导航栏目一下的次级栏目
varsubLayerHttp0=newArray("#","#");//主导航栏目一下的次级栏目连接地址
varsubLayer1=newArray("论坛","文献");//导航栏目二的次级栏目
varsubLayerHttp1=newArray("#","#");//主导航栏目二的次级栏目连接地址
varsubLayer2=newArray("论坛","文献");//导航栏目三的次级栏目
varsubLayerHttp2=newArray("#","#");//主导航栏目三的次级栏目连接地址
注意：蓝色部分是需要新添加的部分。红色部分是要修改的部分。要和上面的编号一一对应。(5)、其他细节调整请参考代码详解部分。
4、附注及扩充。
代码中主要使用的函数及方法详解。
Document.write("tmp")在页面中写入tmp.
varsubLayerHttp1=newArray();定义一个新的数组subLayerHttp1.
For(I=0;I
vartemp=(H=值1?值2:值3)当H的值等于值1的时候temp等于值2。反之temp的值等于值3。
增强功能。
//---------------系统参数*请勿调整------------//
varlayerMax=mainLayer.length 10;
varlayerName="index"
可以设置layerName=其他字段以生成新的下拉菜单。使页面内共存两个下拉菜单。