JAVASCRIPT设计网页中的下拉菜单
类别: JavaScript教程 
在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。
根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。
<DIV ID=\'pad\' ……>
<A ID=\'pad1\' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu(\'idpad1\');" onclick="window.event.returnValue=false;">菜单项一</A>
<A ID=\'pad2\' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu(\'idpad2\');" onclick="window.event.returnValue=false;">菜单项二</A>
……
</DIV>
接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加<BR>换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=\' display:none; z-index:9;\'。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。
<SPAN ID=\'idpad1\' STYLE=\'display:none; z-index:9;\' onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV >
<A ID=\'pad1\' HREF=\'11.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一一</A><BR>
<A ID=\'pad1\' HREF=\'12.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一二</A><BR>
<HR STYLE=\'color:white\' SIZE=1><!--如有必要可以用横线对子菜单分组-->
<A ID=\'pad1\' HREF=\'13.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一三</A><BR>
……
</DIV>
</SPAN>
经过上面的步骤，下拉菜单的格式已经定义好了，下面的任务就是控制这些子菜单的显示和隐藏。
当鼠标移动到主菜单条上时，应显示其子菜单，我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID，过程执行时先设置window.event. cancelBubble = true，并计算子菜单显示的位置，包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域：
CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block";
当鼠标移出主菜单时有两种情况，一种情况是鼠标在子菜单及其主菜单之间移动，这时不能隐藏子菜单；另一种情况是鼠标移出了子菜单及其主菜单的区域，这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout，同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。
网页中的另外两个函数mouseout() 和mouseover() 的功能很简单，分别用于处理鼠标移动时菜单项的颜色变化。
完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。
网页浏览的效果如图1所示，运行环境为IE4.0以上版本。
（图注WANGYE） 图1
<HTML>
<HEAD>
<TITLE>网页中的下拉菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = \'white\';//鼠标移开时置为白色
}
function mouseover()
{
window.event.srcElement.style.color = \'red\';//鼠标进入时置为红色//鼠标进入时置为红色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//为避免闪烁,如果下拉菜单已经显示则不重画.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//计算下拉菜单的位置
x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;
x2 = x + window.event.srcElement.offsetWidth;
y = pad.offsetHeight;
CurMenu.style.top = y;
CurMenu.style.left = x;
CurMenu.style.clip = "rect(0 0 0 0)";
CurMenu.style.display = "block";
//延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";
IsDroped =true;//下拉菜单已经显示
}
function hideMenu()
{
//如果在下拉菜单的范围之内移动则不隐藏.
cY = event.clientY + document.body.scrollTop;
if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||
cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)
{ window.event.cancelBubble = true; return;}
//隐藏
TempMenu.style.display = "none";
window.event.cancelBubble = true;
IsDroped =false;
}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<DIV ID=\'menu\' STYLE=\'position:absolute;background-color:white;width:100%;top:0;left:0;\'>
<DIV ID=\'pad\' STYLE=\'position:relative;height:20;width:100%;font:bold 11pt 宋体;background-color:#007FFF;color:white;\'>
<A TARGET=\'_top\' TITLE=\'\' ID=\'pad1\'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu(\'idpad1\');">
菜单项一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET=\'_top\' TITLE=\'\' ID=\'pad2\'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu(\'idpad2\');"
onclick="window.event.returnValue=false;">
菜单项二
</A>
</DIV>
</DIV>
<SPAN ID=\'idpad1\' STYLE=\'display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;\'
onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV STYLE=\'position:relative;left:0;top:8;\'>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'11.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一一
</A><BR>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'12.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一二
</A><BR>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'13.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一三
</A>
</DIV>
</SPAN>
<SPAN ID=\'idpad2\' STYLE=\'display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;\' onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV STYLE=\'position:relative;left:0;top:8;\'>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'21.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项二一</A><BR>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'22.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项二二</A><BR>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'23.htm\' TARGET=\'_top\'
onmouseot="mouseout();" onmouseover="mouseover()">
子菜单项二三</A><BR>
<HR STYLE=\'color:white\' SIZE=1><!--分隔行-->
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
onclick="parent.close()"
onmouseout="mouseout();" onmouseover="mouseover()">
退出系统</A>
</DIV>
</SPAN>
<!--页面的其它内容-->
</BODY>
</HTML>
根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。
<DIV ID=\'pad\' ……>
<A ID=\'pad1\' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu(\'idpad1\');" onclick="window.event.returnValue=false;">菜单项一</A>
<A ID=\'pad2\' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu(\'idpad2\');" onclick="window.event.returnValue=false;">菜单项二</A>
……
</DIV>
接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加<BR>换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=\' display:none; z-index:9;\'。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。
<SPAN ID=\'idpad1\' STYLE=\'display:none; z-index:9;\' onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV >
<A ID=\'pad1\' HREF=\'11.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一一</A><BR>
<A ID=\'pad1\' HREF=\'12.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一二</A><BR>
<HR STYLE=\'color:white\' SIZE=1><!--如有必要可以用横线对子菜单分组-->
<A ID=\'pad1\' HREF=\'13.htm\' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一三</A><BR>
……
</DIV>
</SPAN>
经过上面的步骤，下拉菜单的格式已经定义好了，下面的任务就是控制这些子菜单的显示和隐藏。
当鼠标移动到主菜单条上时，应显示其子菜单，我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID，过程执行时先设置window.event. cancelBubble = true，并计算子菜单显示的位置，包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域：
CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block";
当鼠标移出主菜单时有两种情况，一种情况是鼠标在子菜单及其主菜单之间移动，这时不能隐藏子菜单；另一种情况是鼠标移出了子菜单及其主菜单的区域，这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout，同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。
网页中的另外两个函数mouseout() 和mouseover() 的功能很简单，分别用于处理鼠标移动时菜单项的颜色变化。
完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。
网页浏览的效果如图1所示，运行环境为IE4.0以上版本。
（图注WANGYE） 图1
<HTML>
<HEAD>
<TITLE>网页中的下拉菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = \'white\';//鼠标移开时置为白色
}
function mouseover()
{
window.event.srcElement.style.color = \'red\';//鼠标进入时置为红色//鼠标进入时置为红色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//为避免闪烁,如果下拉菜单已经显示则不重画.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//计算下拉菜单的位置
x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;
x2 = x + window.event.srcElement.offsetWidth;
y = pad.offsetHeight;
CurMenu.style.top = y;
CurMenu.style.left = x;
CurMenu.style.clip = "rect(0 0 0 0)";
CurMenu.style.display = "block";
//延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";
IsDroped =true;//下拉菜单已经显示
}
function hideMenu()
{
//如果在下拉菜单的范围之内移动则不隐藏.
cY = event.clientY + document.body.scrollTop;
if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||
cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)
{ window.event.cancelBubble = true; return;}
//隐藏
TempMenu.style.display = "none";
window.event.cancelBubble = true;
IsDroped =false;
}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<DIV ID=\'menu\' STYLE=\'position:absolute;background-color:white;width:100%;top:0;left:0;\'>
<DIV ID=\'pad\' STYLE=\'position:relative;height:20;width:100%;font:bold 11pt 宋体;background-color:#007FFF;color:white;\'>
<A TARGET=\'_top\' TITLE=\'\' ID=\'pad1\'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu(\'idpad1\');">
菜单项一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET=\'_top\' TITLE=\'\' ID=\'pad2\'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu(\'idpad2\');"
onclick="window.event.returnValue=false;">
菜单项二
</A>
</DIV>
</DIV>
<SPAN ID=\'idpad1\' STYLE=\'display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;\'
onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV STYLE=\'position:relative;left:0;top:8;\'>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'11.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一一
</A><BR>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'12.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一二
</A><BR>
<A ID=\'pad1\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'13.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一三
</A>
</DIV>
</SPAN>
<SPAN ID=\'idpad2\' STYLE=\'display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;\' onmouseout=\'hideMenu();\'>
<HR STYLE=\'position:absolute;left:0;top:0;color:white\' SIZE=1>
<DIV STYLE=\'position:relative;left:0;top:8;\'>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'21.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项二一</A><BR>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'22.htm\' TARGET=\'_top\'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项二二</A><BR>
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
HREF=\'23.htm\' TARGET=\'_top\'
onmouseot="mouseout();" onmouseover="mouseover()">
子菜单项二三</A><BR>
<HR STYLE=\'color:white\' SIZE=1><!--分隔行-->
<A ID=\'pad2\' STYLE=\'text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white\'
onclick="parent.close()"
onmouseout="mouseout();" onmouseover="mouseover()">
退出系统</A>
</DIV>
</SPAN>
<!--页面的其它内容-->
</BODY>
</HTML>
