看看这篇文章就知道了在Web页面上制作Windows风格的菜单
广东浮法玻璃有限公司信息部 李启拴
随着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" onmouseover="display('0')"onmouseout="menuout('0')">编 辑</td><td id="menu2" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">查 看</td><td id="menu3" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">跳 转</td><td id="menu4" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">工 具</td></tr></table></center></div></div><p><!--webbot bot="PurpleText" PREVIEW="主菜单条定义结束" --></p><p><!--webbot bot="PurpleText" PREVIEW="以下定义弹出菜单" --></p><div id="submenu0"style="position:absolute;top:100;left:100;width:80;display:none; background-color:lightskyblue;"><divalign="center"><center><table id="tb0" border="1" width="80px" cellspacing="0" cellpadding="0"><tr><td id="item00"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('00')" onmouseout="itemout('00')" onclick="hidesubmenu('0')"width="100%" height="25"> 新建</td></tr> <tr><td id="item01"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('01')" onmouseout="itemout('01')" onclick="hidesubmenu('0')"width="100%" height="25"> 打开</td></tr> <tr> <td id="item02"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('02')" onmouseout="itemout('02')" onclick="hidesubmenu('0')"width="100%" height="25"> 保存</td></tr> <tr><td id="item04"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('04')" onmouseout="itemout('04')" onclick="hidesubmenu('0')"width="100%" height="25"> 页面设置</td></tr><tr><td id="item05"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('05')" onmouseout="itemout('05')" onclick="hidesubmenu('0')"width="100%" height="25"> 预览</td></tr><tr><td id="item06"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('06')" onmouseout="itemout('06')" onclick="hidesubmenu('0')"width="100%" height="25"> 打印</td></tr><tr><td id="item07"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('07')" onmouseout="itemout('07')" onclick="hidesubmenu('0')"width="100%" height="25"> 退出</td> </tr></table></center></div></div><p><!--webbot bot="PurpleText" PREVIEW="弹出菜单定义结束" --></p></body></html>
广东浮法玻璃有限公司信息部 李启拴
随着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" onmouseover="display('0')"onmouseout="menuout('0')">编 辑</td><td id="menu2" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">查 看</td><td id="menu3" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">跳 转</td><td id="menu4" width="20%" align="center" onmouseover="display('0')"onmouseout="menuout('0')">工 具</td></tr></table></center></div></div><p><!--webbot bot="PurpleText" PREVIEW="主菜单条定义结束" --></p><p><!--webbot bot="PurpleText" PREVIEW="以下定义弹出菜单" --></p><div id="submenu0"style="position:absolute;top:100;left:100;width:80;display:none; background-color:lightskyblue;"><divalign="center"><center><table id="tb0" border="1" width="80px" cellspacing="0" cellpadding="0"><tr><td id="item00"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('00')" onmouseout="itemout('00')" onclick="hidesubmenu('0')"width="100%" height="25"> 新建</td></tr> <tr><td id="item01"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('01')" onmouseout="itemout('01')" onclick="hidesubmenu('0')"width="100%" height="25"> 打开</td></tr> <tr> <td id="item02"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('02')" onmouseout="itemout('02')" onclick="hidesubmenu('0')"width="100%" height="25"> 保存</td></tr> <tr><td id="item04"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('04')" onmouseout="itemout('04')" onclick="hidesubmenu('0')"width="100%" height="25"> 页面设置</td></tr><tr><td id="item05"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('05')" onmouseout="itemout('05')" onclick="hidesubmenu('0')"width="100%" height="25"> 预览</td></tr><tr><td id="item06"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('06')" onmouseout="itemout('06')" onclick="hidesubmenu('0')"width="100%" height="25"> 打印</td></tr><tr><td id="item07"style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"onmouseover="itemover('07')" onmouseout="itemout('07')" onclick="hidesubmenu('0')"width="100%" height="25"> 退出</td> </tr></table></center></div></div><p><!--webbot bot="PurpleText" PREVIEW="弹出菜单定义结束" --></p></body></html>
解决方案 »
免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货