(http://www.pconline.com.cn/pcedu/sj/wz/other/0308/210199.html)
■ 自适应分辨率可扩展二层JS下拉菜单
序言:
随着互联网的普及和网页制作技术的发展,越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么,在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。
1、 S下拉菜单原理
下拉菜单实际上就是在开始的时候显示一级或者说是主菜单(图一)。当触发条件(例如:鼠标移动到上面时)显示次级菜单(图二)。
图一
图二
那么如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候,其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript 配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件(例如:鼠标移动到上面)时,在使用javascript来控制次级菜单显示。当在次满足触发条件时(例如:鼠标移开),控制次级菜单隐藏。
我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。
2、"自适应分辨率可扩展二层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; //调整主导航表格Cellspacing
var mainTableCellpadding=1; //调整主导航表格Cellpadding
var mainTableBgcolor="#000000"; //调整主导航表格背景色
var mainTableBordercolor=""; //调整主导航表格编框颜色
var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址
var hrefClassName="link" //调整url风格样式
var mainTableTdBgcolor="B2CBCF"; //调整主导航表格Td色
//--------------- 次导航条Table参数调整 ------------//
var subTableBorder=0; //调整次导航条表格边框宽度
var subTableCellspacing=0; //调整次导航条表格Cellspacing
var subTableCellpadding=1; //调整次导航条表格Cellpadding
var 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=0><tr><td><div id='wall' onmouseout=layervib('visible','"+layerMax+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");
for(i=0;i<mainLayer.length;i++){
document.write("<td width='"+mainTableTdWidth+"' bgcolor='"+mainTableTdBgcolor+"' class='"+hrefClassName+"' onmouseover=layervib('visible','"+i+"')> <a href='#'>"+mainLayer[i]+"</a></td>");
}
document.write("</tr></table>");
for(j=0;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)*2+sbuTabbleTop)+"px; z-index:2; height: 24px; visibility: hidden' onmouseover=layervib('visible','"+num+"') onmouseout=layervib('visible','"+layerMax+"')>");
if(subLayerList.length!=0){
document.write("<table width='100px' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'")
for(h=0;h<subLayerList.length;h++){
document.write("<tr><td bgcolor='"+subTableTdBgcolor+"' width='100%' class='link'> <a href='"+ 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=0;i<mainLayer.length;i++){
var E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}
3、"自适应分辨率可扩展二层JS下拉菜单"js代码使用方法。
(1) 将上面的代码存储为js_daohang.js.放在和调用的页面同一个目录下。
(2) 在需要使用的叶面中在如下位置添加<script language=javascript src=js_daohang.js>
<html>
<head>
<title>平安证券柜台系统...</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="text.css" type="text/css">
<script language=javascript src=js_daohang.js>
</head>
(3)在需要显示下拉菜单的地方使用
<script language=javascript>
createMainLayer();
</script>
来产生菜单。如下例。可以随意摆放到页面的任何位置。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300"> </td>
<td width="71%" align="center">
<script language=javascript>
createMainLayer();
</script>
</td>
</tr>
</table>
(4)、如何添加新的主菜单及次级菜单的栏目。
假设我们要在已有的栏目里新增加一个“七色鸟”栏目。下面有“论坛”和“文献”两个次级栏目。那么我么首先要在代码的如下部分添加“七色鸟”。
var mainLayer=new Array("蓝色理想","动意营造","七色鸟");//主导航栏目
0 1 2
然后在如下的位置添加“论坛”和“文献”栏目及连接地址。
var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址
var subLayer2=new Array("论坛","文献");//导航栏目三的次级栏目
var subLayerHttp2=new Array("#","#");//主导航栏目三的次级栏目连接地址
注意:蓝色部分是需要新添加的部分。红色部分是要修改的部分。要和上面的编号一一对应。 (5)、其他细节调整请参考代码详解部分。
4、附注及扩充。
代码中主要使用的函数及方法详解。
Document.write("tmp")页面中写入tmp.
var subLayerHttp1=new Array();定义一个新的数组subLayerHttp1.
For(I=0;I<tmp;I++){语句}设置I=0,当I的值小于tmp的值时执行语句,同时I的值加1。
var temp=(H=值1?值2:值3)当H的值等于值1的时候temp等于值2。反之temp的值等于值3。
增强功能。
//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index"
可以设置layerName=其他字段以生成新的下拉菜单。使页面内共存两个下拉菜单。
分享到:
相关推荐
导致这种差别的原因,主要是因为网页中用了绝对定位的层,并且页面内容设置为居中,这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率,然后让页面或排版做出相应变化。方法一:做为不同的分辨率做...
Director 生成的可执行文件,会根据显示设备的屏幕大小自动调整至全屏显示
Unity3D自动适应分辨率 Posted on 2013年03月22日 by U3d / Unity3D脚本/插件/被围观 450 次 Unity3D中的GU
网页js脚本注入,可执行任意代码。这里有个实例教程,通过注入实现跳过验证码。
引用脚本后,只需要在自适应的控件上设置COls就可以控制他的高度,类似于Frameset,非常容易使用。附Demo
wincc 下拉菜单,代码实现下拉菜单的制作
让Unity的主摄像机,根据实际的设计尺寸,缩放到最佳视角。 将脚本挂载到主摄像机上,并在参数面板中设置内容的设计尺寸即可。
网页常用的javascript脚本
web应用开发 web网站建设实用教程 第3讲 脚本语言 JavaScript JS 语言(共64页).ppt web应用开发 web网站建设实用教程 第4讲 层叠样式表 CSS语言(共64页).ppt web应用开发 web网站建设实用教程 第5讲 HTML5和CSS3...
经典的js树型菜单显示,javascript脚本学习
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法:使用function关键字定义函数。 ...
应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作。 下面测试的是一个廉价机票预订网站(http://www.flyscoot.com/),关键点如下 使用 QWebEngineView 加载网页,并显示...
WEB开发技术教程-网站设计与开发 网页设计-JSP脚本语言-JAVA_WEB 共43页.ppt
交互式Web前端开发》欢迎选择一种更高效的学习JavaScript和jQuery的方式。你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。《JavaScript&...
适合新手学习使用的javascript案例集,包含21个子内容,包含密码篇,鼠标特效,游戏篇,cookie脚本,页面特效等。
javascript下拉菜单.txt很实用的js脚本,下载后只需修改一下后缀名即可使用.
js特效脚本含源码和说明5种自定义下拉菜单列表样式本资源系百度网盘分享地址
在你嵌入了浏览器的工程中,如果网页的脚本中能调用C++代码,那将是一件很惬意的事情,要实现这种交互,就必须实现脚本扩展。本工程就实现了脚本扩展的功能。
js特效脚本含源码和说明select下拉菜单美化本资源系百度网盘分享地址
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。Javascript提供了丰富的运算功能,包括算术运算、关系运算、逻辑运算和连接运算。JavaScript的一个重要功能...