站长资讯通告:
广东浮法玻璃有限公司信息部 李启拴
随着Internet应用的发展，网页的制作技术已成为人们关注的热点，如何设计出界面美观、下载速度快、操作方便、信息密度高的WEB页面成为页面制作者的最终目标。下面我来给大家介绍一种在WEB页面上制作菜单的方法，这种方法有如下一些优点：
仿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中内部的操作语言，因此要了解其语法、函数等。
下面是一个实例，具体来介绍一下，这种菜单的实现方法：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Home Page</title>
</head>
<script language="JavaScript"><!--
//以下是JSCRIPT，用于操作页面上的元素
var nummenu=5;var j;var premenu = "100";var preitem="100";
function itemover(j) //当鼠标移动到一菜单项时执行，改变其颜色及背景
{ window.event.cancelBubble=true;
if (preitem !="100") {itemout(preitem);}
preitem = j;
document.all("item"+j).style.backgroundColor = "" ;
document.all("item"+j).filters("invert").enabled=true;}
function itemout(j) //当鼠标从一菜单项移出去时执行，恢复其颜色
{ if ( ! window.event.toElement) { return;}
var str = new String(j);
if (window.event.toElement.tagName !="TD" )
{hidesubmenu(str.substring(0,1));}
window.event.cancelBubble=true;
if (j<0) { return;}
document.all("item"+j).style.backgroundColor = "maroon" ;
document.all("item"+j).filters("invert").enabled=false;}
function hidesubmenu(p) //隐蔽子菜单
{ //alert(window.event.type + " " + window.event.srcElement.tagName)
window.event.cancelBubble= true;
document.all("submenu" + p).style.display="none";}
function display(i) //显示子菜单
{ if (premenu !="100") {document.all("submenu" +
premenu).style.display="none";}
premenu = i;
document.all("submenu" + i).style.display="" ;
document.all("submenu" + i).style.width = document.all("menu" +
i).clientWidth;
document.all("tb" + i).style.width = document.all("menu" +
i).clientWidth;
document.all("submenu" + i).style.top =
window.event.srcElement.offsetHeight ;
document.all("submenu" + i).style.left =
window.event.srcElement.offsetLeft ;}
function menuout(h) //当鼠标离开子菜单时执行
{ if (window.event.toElement)
{ if ( window.event.toElement.tagName !="TD" &&
window.event.toElement.tagName !="TABLE") {hidesubmenu(h);}}
else {return;}}
// --></script>
<body bgcolor="#FFFAF0" topmargin="0" leftmargin="0">
<p><!--webbot bot="PurpleText" PREVIEW="以下定义主菜单条" --></p>
<div align="center" height="1"><div align="center"><center>
<table border="1" style="background-color: maroon; color:
cyan;cursor:hand;"
cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="menu0" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">文 件</td>
<td id="menu1" width="20%" align="center"
随着Internet应用的发展，网页的制作技术已成为人们关注的热点，如何设计出界面美观、下载速度快、操作方便、信息密度高的WEB页面成为页面制作者的最终目标。下面我来给大家介绍一种在WEB页面上制作菜单的方法，这种方法有如下一些优点：
仿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中内部的操作语言，因此要了解其语法、函数等。
下面是一个实例，具体来介绍一下，这种菜单的实现方法：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Home Page</title>
</head>
<script language="JavaScript"><!--
//以下是JSCRIPT，用于操作页面上的元素
var nummenu=5;var j;var premenu = "100";var preitem="100";
function itemover(j) //当鼠标移动到一菜单项时执行，改变其颜色及背景
{ window.event.cancelBubble=true;
if (preitem !="100") {itemout(preitem);}
preitem = j;
document.all("item"+j).style.backgroundColor = "" ;
document.all("item"+j).filters("invert").enabled=true;}
function itemout(j) //当鼠标从一菜单项移出去时执行，恢复其颜色
{ if ( ! window.event.toElement) { return;}
var str = new String(j);
if (window.event.toElement.tagName !="TD" )
{hidesubmenu(str.substring(0,1));}
window.event.cancelBubble=true;
if (j<0) { return;}
document.all("item"+j).style.backgroundColor = "maroon" ;
document.all("item"+j).filters("invert").enabled=false;}
function hidesubmenu(p) //隐蔽子菜单
{ //alert(window.event.type + " " + window.event.srcElement.tagName)
window.event.cancelBubble= true;
document.all("submenu" + p).style.display="none";}
function display(i) //显示子菜单
{ if (premenu !="100") {document.all("submenu" +
premenu).style.display="none";}
premenu = i;
document.all("submenu" + i).style.display="" ;
document.all("submenu" + i).style.width = document.all("menu" +
i).clientWidth;
document.all("tb" + i).style.width = document.all("menu" +
i).clientWidth;
document.all("submenu" + i).style.top =
window.event.srcElement.offsetHeight ;
document.all("submenu" + i).style.left =
window.event.srcElement.offsetLeft ;}
function menuout(h) //当鼠标离开子菜单时执行
{ if (window.event.toElement)
{ if ( window.event.toElement.tagName !="TD" &&
window.event.toElement.tagName !="TABLE") {hidesubmenu(h);}}
else {return;}}
// --></script>
<body bgcolor="#FFFAF0" topmargin="0" leftmargin="0">
<p><!--webbot bot="PurpleText" PREVIEW="以下定义主菜单条" --></p>
<div align="center" height="1"><div align="center"><center>
<table border="1" style="background-color: maroon; color:
cyan;cursor:hand;"
cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="menu0" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">文 件</td>
<td id="menu1" width="20%" align="center"
