* 仿WINDOWS中的菜单风格。
*下载速度快,它仅是由DHTML代码构造出来的,因此页面的字节数很小。
* 易于动态维护菜单的栏目数及子菜单中的项目数。
* 可实现多级菜单。
一、这种制作方法主要涉及以下一些基本知识:
1、DHTML:它是基于HTML和CSS(Cascading Style Sheet),HTML就是我们一般所写的超文本标记语言,CSS指的是页面上的每个元素都具有一个Style属性,通过改变Style属性,可动态地改变页面上各元素的显示属性。设置方法如下:
如在HTML文件中有一段文本:
<p> Some Text Here </p>
为了通过CSS来控制这一段文本,需要修改它的属性:
<p id=txttitle1" style= font-size:50px;color: green>Some Text Here</p>
其中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中内部的操作语言,因此要了解其语法、函数等。
下面是一个实例,具体来介绍一下这种菜单的实现方法。
需要说明的几个问题:
* 在以上例子中,为了减小代码的长度,已将弹出菜单简化成了一个,即弹出的菜单都一样。
* 上例中,代码看起来很多,事实上整个页面才5134字节,制作起来也很容易,大部分工作只是拷贝和粘贴。
* 如果您想在自己的机器上演示一下上述效果,则只需要将上例中的代码拷贝下来,然后另存为一个HTML类型(如 menu.htm)的文件,然后用鼠标双击该文件即可看到这种效果,也可访问http://liqishuan.163.net/menu.htm 直接看到。