中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

用Javascript制作推拉门式菜单
　冯永曜　　黄山村夫

　　这里介绍的推拉门式菜单，故名思义，其效果就象推拉门一样，可以随意拉出推进，非常节省页面空间，你可用鼠标点击主菜单条上的任意一个主菜单项，都会缓缓地拉出一个子菜单框来，当你再次点击主菜单项时，子菜单框又缓缓地推进去，是不是很方便？（见下面的效果图）这种效果当然可以在Dreamweaver中用图层再配合时线功能来做，但那样代码比较多，我这里用自编的javascript程序，则代码要少多了。下面介绍制作方法。


　　制作思路：
　　把主菜单和各主菜单对应的子菜单分别做在不同的图层上，并把主菜单的ID号定义为“div0”，其它子菜单的ID号分别定义为“div1”、“div2”、“div3”......。子菜单的“Z_index”参数值要大于主菜单，以免主菜单把子菜单遮盖。再把所有子菜单的顶部与相应主菜单的底部对齐后，再把子菜单图层的“left”参数改为负值，使其在显示屏幕外，平时是看不见的。再用一段Javascript程序使其能动态地改变子菜单所在图层的“left”参数把它拉出来和送回原处。然后在主菜单的超级链接上加一个“onclick”事件来控制其对应的子菜单是需要拉出来还是送回去。
　　制作方法：
　　1、在dreamweaver中，按上面讲的思路用图层做好主菜单的子菜单，菜单要放什么内容及菜单项的多少可根据实际需要增减。不是使用Dreamweaver的网友可把下面的代码复制到网页源代码的<body>和</body>之间：
<div id="div0" style="position:absolute; left:12px; top:151px; width:116px; height:104px; z-index:1" >
<table width="100%" border="0" height="100%" cellpadding="0">
<tr>
<td bgcolor="#FFFFCC" height="17">
<div align="left"><a href="#" onclick=" canout(1) ;moveout(1)">主菜单1</a></div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left"><a href="#" onclick=" canout(2) ;moveout(2)">主菜单2</a></div></td></tr>
<tr><td bgcolor="#99CCFF">
<div align="left"><a href="#" onclick=" canout(3) ;moveout(3)">主菜单3</a></div></td></tr>
<tr> <td bgcolor="#CCFFFF">
<div align="left"><a href="#" onclick=" canout(4) ;moveout(4)">主菜单4</a></div></td></tr>
<tr> <td bgcolor="#CCFFCC">
<div align="left"><a href="#" onclick=" canout(5) ;moveout(5)">主菜单5</a></div></td></tr>
</table>
</div>
<div id="div1" style="position:absolute; left:-114px; top:171px; width:114px; height:107px; z-index:2; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000"> <div align="center"><a href="#">子菜单1</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单4</a><br>
<a href="#">子菜单5</a><br>
</div>
</div>
　　由于篇幅所限，这里只给出主菜单和第一个主菜单项所对应的子菜单图层代码。你可在主菜单的图层（“div0”）上通过增加（或减少）表格的行来增加（或减少）主菜单项；通过复制子菜单图层来增加子菜单，不过复制的子菜单图层中的ID号和“z-index”值要作相应更改。

　　2、在菜单代码的后面加入下面这段Javascript程序：
<script language="Javascript">
<!--
var m=5; //声明一个存放子菜单图层数的变量，当子菜单图层数不是5时，要改变这个变量的值
var can=new Array(); //声明一个数组，存放是否拉出子菜单的控制代码
var newdivleft=new Array() //声明一个数组，存放各图层新的“left”参数值
var olddivleft=new Array() //声明一个数组，存放初始的各图层“left”参数值
var margeleft=parseInt(document.all.div0.style.left); //声明存放拉出子菜单的左边距变量
for (i=0;i<=m;i++){ //获取上面声明的数组的初始值
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;}
function canout(x){ //设置子菜单是拉出还是推入的控制代码，为1时拉出，为0时推入。
if (can[x]==1) can[x]=0;else can[x]=1;
}
function moveout(x){
k=x;
if (can[x]==1) { //开始拉出子菜单
newdivleft[x]+=6; //设置每次拉出6个像素
if (newdivleft[x]<(margeleft+6)) { //如果没有拉到位，可继续拉。
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x]; //拉一次子菜单
t1=setTimeout("moveout(k)",10); //每10毫秒拉动一次子菜单
}
else
{thisdiv.left=olddivleft[0];
clearTimeout(t1);} //如果子菜单已拉到位，则清除定时函数，停止拉动子菜单。
}
else
{
if (can[x]==0){ //开始推入子菜单，方法与拉出子菜单时相同，只是方向相反。
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)} else
{clearTimeout(t2);}
}
}}
-->
</script>

　　3、在需要子菜单的主菜单项的超级链接中加上事件代码：onclick=" canout(n) ;moveout(n)"；要注意，括号中的n必须与其所对应的子菜单图层的ID号后面的数字相同。
　　在应用本文提供的程序时，各图层的ID号必须采用上面制作思路中讲的方法标识，不能采用Dreamweaver 默认的ID（Layer1、layer2等）；另外本文程序只能在IE中正常运行，在NS中要正常运行必须对程序作少量改动。
　赛迪网　


 

﹣更多本栏目内容
??Windows 2000系统安全设置攻略
??Dreamweaver编写CSS需要掌握的技巧
??使用Flash MX过程中的3个小技巧
??拖IE9网站图标到Win7任务栏 精彩好礼任你拿
??从此不再耗流量？Google离线地图试用
??给瑞星添加移动存储自动杀毒功能
??一周壁纸榜单 靓丽风景伴您欢度周末
??金山网络七款软件齐升级 炫丽界面贺新春
??提升网站流量和权重 百度热榜排第一
☉预警：电商促销引钓鱼 七夕网购需谨慎

本站检索


与 或

中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿，强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈？
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统




   
网络教室编辑信箱