下拉菜单全攻略之Javascript篇-javascript-IT落伍者

随着互联网的普及和网页制作技术的发展越来越多的网友开始制作自己的网站做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式那么在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的自适应分辨率可扩展二层JS下拉菜单的工作原理和使用方法

S下拉菜单原理

下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）当触发条件（例如鼠标移动到上面时）显示次级菜单（图二）

那么如何实现这样的效果呢其实很简单所有的下拉菜单都是通过图层的显隐来实现的在文件下载的时候其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里只是次级菜单被隐藏起来隐藏的方法一般是使用javascript 配合css控制次级菜单的图层的属性visibility为隐藏所以在开始的使用你是看不见次级菜单的当满足触发条件（例如鼠标移动到上面）时在使用javascript来控制次级菜单显示当在次满足触发条件时（例如鼠标移开）控制次级菜单隐藏

我们现在讲的这个自适应分辨率可扩展二层JS下拉菜单可以自动适应浏览器分辨率的改变始终保持相对位置可以方便的自己定制菜单显示内容及连接页面可以随意扩充主导航和次导航的栏目个数可以自由改变连接和导航表格的样式和外观等等

自适应分辨率可扩展二层JS下拉菜单js代码详解

// 主导航条内容 //

var mainLayer=new Array(蓝色理想动意营造);//主导航栏目

// 次导航条内容 //

var subLayer=new Array(论坛文献); //导航栏目一下的次级栏目

var subLayerHttp=new Array(##);//主导航栏目一下的次级栏目连接地址

var subLayer=new Array(论坛文献);//导航栏目二的次级栏目

var subLayerHttp=new Array(##);//主导航栏目二的次级栏目连接地址

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

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

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

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

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

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

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

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

var hrefClassName=link //调整url风格样式

var mainTableTdBgcolor=BCBCF; //调整主导航表格Td色

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

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

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

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

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

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

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

var subTableTdBgcolor=BCBCF; //调整次导航表格Td色

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

var sbuTabbleLeft=; //次导航表格左右微调

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

var layerMax=mainLayerlength+;

var layerName=index;

// 生成下拉菜单 //

function createMainLayer(){

documentwrite(<table border= cellspacing= cellpadding=><tr><td><div id=wall onmouseout=layervib(visible+layerMax+) style=position:relative; left:px; top:px; width:%; zindex: ><table width=+mainLayerlength*mainTableTdWidth+ border=+mainTableBorder+ cellspacing=+mainTableCellpadding+ cellpadding=+mainTableCellpadding+ bgcolor=+mainTableBgcolor+ bordercolor=+mainTableBordercolor+ background=+mainTableBackgroundImg+><tr>);

for(i=;i<mainLayerlength;i++){

documentwrite(<td width=+mainTableTdWidth+ bgcolor=+mainTableTdBgcolor+ class=+hrefClassName+ onmouseover=layervib(visible+i+)> <a #>+mainLayer[i]+</a></td>);

}

documentwrite(</tr></table>);

for(j=;j<mainLayerlength;j++){

createSubLayer(j);

}

documentwrite(</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);

documentwrite(<div id=+subLayerName+ style=position:absolute; left:+(subLayerLeft+sbuTabbleLeft)+px; top:+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*+sbuTabbleTop)+px; zindex:; height: px; visibility: hidden onmouseover=layervib(visible+num+) onmouseout=layervib(visible+layerMax+)>);

if(subLayerListlength!=){

documentwrite(<table width=px border=+subTableBorder+ cellspacing=+subTableCellpadding+ cellpadding=+subTableCellpadding+ bgcolor=+subTableBgcolor+ bordercolor=+subTableBordercolor+ background=+subTableBackgroundImg+)

for(h=;h<subLayerListlength;h++){

documentwrite(<tr><td bgcolor=+subTableTdBgcolor+ width=% class=link> <a + subLayerHttpList [h]+ class=link>+subLayerList[h]+</a> </td></tr>);

}

documentwrite(</table>);

}

documentwrite(</div>);

//次菜单显隐控制//

function layervib(typenum){

var H=type;

var temp=(H=visible?hidden:visible)

for(var i=;i<mainLayerlength;i++){

var E=eval(documentallindex+i+style);

var H=eval(i);

if(i==num){Evisibility=type}else{Evisibility=temp};

}

自适应分辨率可扩展二层JS下拉菜单js代码使用方法

() 将上面的代码存储为js_daohangjs放在和调用的页面同一个目录下

() 在需要使用的叶面中在如下位置添加<script language=javascript src=js_daohangjs>

<html>

<head>

<title>平安证券柜台系统</title>

</head>

（）在需要显示下拉菜单的地方使用

createMainLayer();

</script>

来产生菜单如下例可以随意摆放到页面的任何位置

<tr>

createMainLayer();

</script>

</td>

</tr>

</table>

()如何添加新的主菜单及次级菜单的栏目

假设我们要在已有的栏目里新增加一个七色鸟栏目下面有论坛和文献两个次级栏目那么我么首先要在代码的如下部分添加七色鸟

var mainLayer=new Array(蓝色理想动意营造七色鸟);//主导航栏目

然后在如下的位置添加论坛和文献栏目及连接地址

var subLayer=new Array(论坛文献); //导航栏目一下的次级栏目

var subLayerHttp=new Array(##);//主导航栏目一下的次级栏目连接地址

var subLayer=new Array(论坛文献);//导航栏目二的次级栏目

var subLayerHttp=new Array(##);//主导航栏目二的次级栏目连接地址

var subLayer=new Array(论坛文献);//导航栏目三的次级栏目

var subLayerHttp=new Array(##);//主导航栏目三的次级栏目连接地址

注意蓝色部分是需要新添加的部分红色部分是要修改的部分要和上面的编号一一对应 ()其他细节调整请参考代码详解部分

附注及扩充

代码中主要使用的函数及方法详解

Documentwrite(tmp)页面中写入tmp

var subLayerHttp=new Array();定义一个新的数组subLayerHttp

For(I=;I<tmp;I++){语句}设置I=当I的值小于tmp的值时执行语句同时I的值加

var temp=(H=值?值:值)当H的值等于值的时候temp等于值反之temp的值等于值

增强功能

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

var layerMax=mainLayerlength+;

var layerName=index

可以设置layerName=其他字段以生成新的下拉菜单使页面内共存两个下拉菜单