用Javascript制作推拉门式菜单

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


制作思路：
把主菜单和各主菜单对应的子菜单分别做在不同的图层上，并把主菜单的ID号定义为“div0”，其它子菜单的ID号分别定义为“div1”、“div2”、“div3”......。子菜单的“Z_index”参数值要大于主菜单，以免主菜单把子菜单遮盖。再把所有子菜单的顶部与相应主菜单的底部对齐后，再把子菜单图层的“left”参数改为负值，使其在显示屏幕外，平时是看不见的。再用一段Javascript程序使其能动态地改变子菜单所在图层的“left”参数把它拉出来和送回原处。然后在主菜单的超级链接上加一个“onclick”事件来控制其对应的子菜单是需要拉出来还是送回去。
制作方法：
1、在dreamweaver中，按上面讲的思路用图层做好主菜单的子菜单，菜单要放什么内容及菜单项的多少可根据实际需要增减。不是使用Dreamweaver的网友可把下面的代码复制到网页源代码的和之间：


由于篇幅所限，这里只给出主菜单和第一个主菜单项所对应的子菜单图层代码。你可在主菜单的图层（“div0”）上通过增加（或减少）表格的行来增加（或减少）主菜单项；通过复制子菜单图层来增加子菜单，不过复制的子菜单图层中的ID号和“z-index”值要作相应更改。
2、在菜单代码的后面加入下面这段Javascript程序：

3、在需要子菜单的主菜单项的超级链接中加上事件代码：onclick=" canout(n) ;moveout(n)"；要注意，括号中的n必须与其所对应的子菜单图层的ID号后面的数字相同。
在应用本文提供的程序时，各图层的ID号必须采用上面制作思路中讲的方法标识，不能采用Dreamweaver 默认的ID（Layer1、layer2等）；另外本文程序只能在IE中正常运行，在NS中要正常运行必须对程序作少量改动。
_xyz
用Javascript制作推拉门式菜单 树状结构菜单(Javascript) 用javascript自定义SharePoint文档库/列表项菜单 Javascript实现浏览器菜单命令 树状结构菜单1(Javascript) 用Javascript制作会计算的表单 用JavaScript制作在线测试题 用JavaScript制作在线测试题 制作拖拉式菜单技巧 的Flash 用Authorware制作精美功能菜单 网页菜单工厂(WebMenuShop) V2.50 建立JavaScript网页菜单 CSS制作菜单 ColdFusion制作树状菜单 婚宴菜单制作要求 Javascript教程下拉菜单全攻略之Javascript篇-Javascript教程下... Photoshop制作Vista效果菜单 JS教程:为什么尽量用局部变量代替全局变量-Javascript/Ajax-网页制作-网页... 用EasyBoot（启动易）制作Windows个性化启动菜单安装光盘 导航菜单CSS五分钟快速制作 Flash导航菜单轻松制作好帮手 Flash导航菜单轻松制作好帮手 如何用Dreamweaver轻松制作弹出菜单 如何用Dreamweaver轻松制作弹出菜单 如何用CSS制作横向菜单?