在 Web 页面上制作 WINDOWS 风格的菜单

　

李启拴
　　随着Internet应用的发展，网页的制作技术已成为人们关注的热点，如何设计出界面美观、下载速度快、操作方便、信息密集度高的WEB页面成为页面制作者的最终目标。下面给大家介绍一种在WEB页面上制作菜单的方法，这种方法有如下一些优点：

　　* 仿WINDOWS中的菜单风格。

　　*下载速度快，它仅是由DHTML代码构造出来的，因此页面的字节数很小。

　　* 易于动态维护菜单的栏目数及子菜单中的项目数。

　　* 可实现多级菜单。

　　一、这种制作方法主要涉及以下一些基本知识：

　　1、DHTML：它是基于HTML和CSS(Cascading Style Sheet)，HTML就是我们一般所写的超文本标记语言，CSS指的是页面上的每个元素都具有一个Style属性，通过改变Style属性，可动态地改变页面上各元素的显示属性。设置方法如下：

　　如在HTML文件中有一段文本：

　　为了通过CSS来控制这一段文本，需要修改它的属性：

　　其中id 是给该段文本定义了一个参考名，从而就可通过该ID在JSCRIPT或VBSCRIPT中引用它；style即是定义的CSS，它包含很多属性项，如上例中的font-size、color，在SCRIPT中可以动态地来改变这些属性项，从而实现动态改变显示风格的效果，它的语法如下：

　　style=”属性名1：属性值1；属性名2：属性值2;......;”

　　下面是本例中所用到的几个CSS属性：

　　color：指定元素的字体颜色。

　　background-color：指定元素的背景颜色。

　　Position：指定元素的定位方式，缺省情况下是顺序定位，即各个元素顺序排列，如果要指定某一元素显示在屏幕上的某一确定位置，则应指定position属性为绝对定位方式，即position:absolute。

　　Top：元素的左上角距窗口上边框的距离。

　　Left：元素的左上角距窗口左边框的距离。

　　Cursor：光标类型。

　　Filter：实现滤镜效果。

　　2、DHTML中的事件触发机制：onclick,onload,onfilterchange等等。

　　3、DHTML的目标模型：是目标的树形结构，如同在Windows文件系统中的路径一样，参考一个文件时要指定其路径，同样在DHTML中参照页面上的某个元素时，要指定其层次路径，一般表示为：document.all.元素ID.属性。

　　4、Vbscript或Jscript：这是DHTML中内部的操作语言，因此要了解其语法、函数等。

　　下面是一个实例，具体来介绍一下这种菜单的实现方法。

　　上述代码实现的效果如图1所示。

　　（图注WEB-1）图1

　　需要说明的几个问题：

　　* 在以上例子中，为了减小代码的长度，已将弹出菜单简化成了一个，即弹出的菜单都一样。

　　* 上例中，代码看起来很多，事实上整个页面才5134字节，制作起来也很容易，大部分工作只是拷贝和粘贴。

　　* 如果您想在自己的机器上演示一下上述效果，则只需要将上例中的代码拷贝下来，然后另存为一个HTML类型（如 menu.htm）的文件，然后用鼠标双击该文件即可看到这种效果，也可访问http://liqishuan.163.net/menu.htm 直接看到。