知识大全下拉菜单全攻略之Javascript篇

Posted 2022-07-20 知

篇首语：盛年不重来，一日难再晨。及时宜自勉，岁月不待人。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全下拉菜单全攻略之Javascript篇相关的知识，希望对你有一定的参考价值。

下拉菜单全攻略之Javascript篇 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　随着互联网的普及和网页制作技术的发展越来越多的网友开始制作自己的网站做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式那么在下面我将简单介绍一下众多下拉菜单制作方法中完全使用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= ; //调整主导航表格Cellspacingvar mainTableCellpadding= ; //调整主导航表格Cellpaddingvar mainTableBgcolor= # ; //调整主导航表格背景色var mainTableBordercolor= ; //调整主导航表格编框颜色var mainTableBackgroundImg= ; //调整主导航表格背景图片url地址var hrefClassName= link //调整url风格样式var mainTableTdBgcolor= B CBCF ; //调整主导航表格Td色

　　// 次导航条Table参数调整 //var subTableBorder= ; //调整次导航条表格边框宽度var subTableCellspacing= ; //调整次导航条表格Cellspacingvar subTableCellpadding= ; //调整次导航条表格Cellpaddingvar subTableBgcolor= # ; //调整次导航条表格背景色var subTableBordercolor= ; //次导航条表格编框颜色var subTableBackgroundImg= ; //次导航条表格背景图片url地址var subTableTdBgcolor= B CBCF ; //调整次导航表格Td色var sbuTabbleTop= ; //次导航表格上下微调var sbuTabbleLeft= ; //次导航表格左右微调

　　// 系统参数*请勿调整 //var layerMax=mainLayer length+ ;var layerName= index ;

　　// 生成下拉菜单 //function createMainLayer() document write( <table border= cellspacing= cellpadding= ><tr><td><div id= wall onmouseout=layervib( visible +layerMax+ ) style= position:relative; left: px; top: px; width: %; z index: ><table width= +mainLayer length*mainTableTdWidth+ border= +mainTableBorder+ cellspacing= +mainTableCellpadding+ cellpadding= +mainTableCellpadding+ bgcolor= +mainTableBgcolor+ bordercolor= +mainTableBordercolor+ background= +mainTableBackgroundImg+ ><tr> );for(i= ;i<mainLayer length;i++)document write( <td width= +mainTableTdWidth+ bgcolor= +mainTableTdBgcolor+ class= +hrefClassName+ onmouseover=layervib( visible +i+ )> <a # > +mainLayer[i]+ </a></td> );document write( </tr></table> );for(j= ;j<mainLayer length;j++)createSubLayer(j);document write( </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);document write( <div id= +subLayerName+ style= position:absolute; left: +(subLayerLeft+sbuTabbleLeft)+ px; top: +((mainTableBorder+mainTableCellspacing+mainTableCellpadding)* +sbuTabbleTop)+ px; z index: ; height: px; visibility: hidden onmouseover=layervib( visible +num+ ) onmouseout=layervib( visible +layerMax+ )> );if(subLayerList length!= )document write( <table width= px border= +subTableBorder+ cellspacing= +subTableCellpadding+ cellpadding= +subTableCellpadding+ bgcolor= +subTableBgcolor+ bordercolor= +subTableBordercolor+ background= +subTableBackgroundImg+ ) for(h= ;h<subLayerList length;h++) document write( <tr><td bgcolor= +subTableTdBgcolor+ width= % class= link > <a + subLayerHttpList [h]+ class= link > +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= ;i<mainLayer length;i++)var E=eval( document all index +i+ style );var H=eval(i);if(i==num)E visibility=typeelseE visibility=temp;

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

　　( ) 将上面的代码存储为js_daohang js 放在和调用的页面同一个目录下　　( ) 在需要使用的叶面中在如下位置添加<script language=javascript src=js_daohang js>

　　<><head><title>平安证券柜台系统 </title><meta equiv= Content Type content= text/; charset=gb ><link rel= stylesheet type= text/css ><script language=javascript src=js_daohang js></head>

　　（）在需要显示下拉菜单的地方使用<script language=javascript>createMainLayer();</script>　　来产生菜单如下例可以随意摆放到页面的任何位置

　　<table width= % border= cellspacing= cellpadding= ><tr> <td width= > </td><td width= % align= center > <script language=javascript>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( # # );//主导航栏目三的次级栏目连接地址

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

　　附注及扩充

　　代码中主要使用的函数及方法详解 Document write( tmp )页面中写入tmp var subLayerHttp =new Array();定义一个新的数组subLayerHttp For(I= ;I<tmp;I++)语句设置I= 当I的值小于tmp的值时执行语句同时I的值加 var temp=(H=值 ?值 :值 )当H的值等于值的时候temp等于值反之temp的值等于值

　　增强功能 // 系统参数*请勿调整 //var layerMax=mainLayer length+ ;var layerName= index

cha138/Article/program/Java/JSP/201311/19548

知识大全 下拉菜单全攻略之Javascript篇

知识大全下拉菜单全攻略之Javascript篇