《Javascript制作下拉菜单.docxVIP

Javascript篇制作下拉菜单--自适应分辨率可扩展二层JS下拉菜单序言做为网站最重要的部分—导航菜单有各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。下面将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。S下拉菜单原理下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）。当触发条件（例如：鼠标移动到上面时）显示次级菜单（图二）。图一图二如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候，其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript 配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件（例如：鼠标移动到上面）时，在使用javascript来控制次级菜单显示。当在次满足触发条件时（例如：鼠标移开），控制次级菜单隐藏。我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。自适应分辨率可扩展二层JS下拉菜单js代码详解//--------------- 主导航条内容 ------------//var mainLayer=new Array(蓝色理想,动意营造);//主导航栏目//--------------- 次导航条内容 ------------//var subLayer0=new Array(论坛,文献); //导航栏目一下的次级栏目var subLayerHttp0=new Array(#,#);//主导航栏目一下的次级栏目连接地址var subLayer1=new Array(论坛,文献);//导航栏目二的次级栏目var subLayerHttp1=new Array(#,#);//主导航栏目二的次级栏目连接地址//--------------- 主导航条Table参数调整 ------------//var mainTableTdWidth=100; //每个TD的宽度，调整主导航内容间距var mainTableBorder=0; //调整主导航表格边框宽度var mainTableCellspacing=0; //调整主导航表格Cellspacingvar mainTableCellpadding=1; //调整主导航表格Cellpaddingvar mainTableBgcolor=#000000; //调整主导航表格背景色var mainTableBordercolor=; //调整主导航表格编框颜色var mainTableBackgroundImg=; //调整主导航表格背景图片url地址var hrefClassName=link //调整url风格样式var mainTableTdBgcolor=B2CBCF; //调整主导航表格Td色//--------------- 次导航条Table参数调整 ------------//var subTableBorder=0; //调整次导航条表格边框宽度var subTableCellspacing=0; //调整次导航条表格Cellspacingvar subTableCellpadding=1; //调整次导航条表格Cellpaddingvar subTableBgcolor=#000000; //调整次导航条表格背景色var subTableBordercolor=; //次导航条表格编框颜色var subTableBackgroundImg=; //次导航条表格背景图片url地址var subTableTdBgcolor=B2CBCF; //调整次导航表格Td色var sbuTabbleTop=21; //次导航表格上下微调var sbuTabbleLeft=-1; //次导航表格左右微调//--------------- 系统参数*请勿调整 ------------//var layerMax=mainLayer.length+10;var layerName=index;//--------------- 生成下拉菜单 ------------//function createMainLayer(){ document.write(table border=0 cellspacing=0 cellpadding=0trtddiv id=wall onmouseout=laye