Javascript制作下拉菜单.docx

Javascript制作下拉菜单.docx

ID:51690106

大小:39.73 KB

页数:7页

时间:2020-03-15

Javascript制作下拉菜单.docx_第1页
Javascript制作下拉菜单.docx_第2页
Javascript制作下拉菜单.docx_第3页
Javascript制作下拉菜单.docx_第4页
Javascript制作下拉菜单.docx_第5页
资源描述:

《Javascript制作下拉菜单.docx》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、Javascript篇制作下拉菜单--自适应分辨率可扩展二层JS下拉菜单序言做为网站最重要的部分—导航菜单有各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。下面将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。1.S下拉菜单原理下拉菜单实际上就是在开始的时候显示一级或者说是主菜单(图一)。当触发条件(例如:鼠标移动到上面时)显示次级菜单(图二)。图一图二如何实现这样的效果呢。其实很简单。所有的

2、下拉菜单都是通过图层的显隐来实现的。在文件下载的时候,其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件(例如:鼠标移动到上面)时,在使用javascript来控制次级菜单显示。当在次满足触发条件时(例如:鼠标移开),控制次级菜单隐藏。我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览

3、器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。2."自适应分辨率可扩展二层JS下拉菜单"js代码详解//---------------主导航条内容------------//varmainLayer=newArray("蓝色理想","动意营造");//主导航栏目//---------------次导航条内容------------//varsubLayer0=newArray("论坛","

4、文献");//导航栏目一下的次级栏目varsubLayerHttp0=newArray("#","#");//主导航栏目一下的次级栏目连接地址varsubLayer1=newArray("论坛","文献");//导航栏目二的次级栏目varsubLayerHttp1=newArray("#","#");//主导航栏目二的次级栏目连接地址//---------------主导航条Table参数调整------------//varmainTableTdWidth=100;//每个TD的宽度,调整主导航

5、内容间距varmainTableBorder=0;//调整主导航表格边框宽度varmainTableCellspacing=0;//调整主导航表格CellspacingvarmainTableCellpadding=1;//调整主导航表格CellpaddingvarmainTableBgcolor="#000000";//调整主导航表格背景色varmainTableBordercolor="";//调整主导航表格编框颜色varmainTableBackgroundImg="";//调整主导航表格背

6、景图片url地址varhrefClassName="link"//调整url风格样式varmainTableTdBgcolor="B2CBCF";//调整主导航表格Td色//---------------次导航条Table参数调整------------//varsubTableBorder=0;//调整次导航条表格边框宽度varsubTableCellspacing=0;//调整次导航条表格CellspacingvarsubTableCellpadding=1;//调整次导航条表格Cellpad

7、dingvarsubTableBgcolor="#000000";//调整次导航条表格背景色varsubTableBordercolor="";//次导航条表格编框颜色varsubTableBackgroundImg="";//次导航条表格背景图片url地址varsubTableTdBgcolor="B2CBCF";//调整次导航表格Td色varsbuTabbleTop=21;//次导航表格上下微调varsbuTabbleLeft=-1;//次导航表格左右微调//---------------系统

8、参数*请勿调整------------//varlayerMax=mainLayer.length+10;varlayerName="index";//---------------生成下拉菜单------------//functioncreateMainLayer(){document.write("

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。