在网页制作时
为了更好地组织信息
使显示的信息分类明确
层次清晰
网页制作者往往费尽心机
常用的方法有用树型结构显示信息
用表格进行网页布局
用框架(frame)组织页面等等
但对于习惯了Windows操作系统的用户来说
利用菜单操作可以算是最自然的方法了
下面我们就来看一下怎样在网页中设计下拉式菜单
下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成
每个子菜单往往还包含几个子菜单项
通常
只有菜单条显示在窗口中
并且当鼠标指针指向菜单条时
菜单条的子菜单才显示出来
当鼠标指针离开菜单时
子菜单则隐藏起来
回到只显示主菜单条的状态
根据上述下拉菜单的特点我们就可以开始在网页中制作下拉菜单了我们在网页的顶部放置一个区域用于显示主菜单条每一个主菜单条作为一个超链接横向置于该区域中当然除非菜单项没有子菜单一般情况下这里的超链接不指向任何地址只用它来激活子菜单区域的格式见程序
<DIV ID=pad ……>
<A ID=pad onmouseout=mouseout(); hideMenu(); onmouseover=mouseover();
doMenu(idpad); onclick=windoweventreturnValue=false;>菜单项一</A>
<A ID=pad onmouseout=mouseout(); hideMenu(); onmouseover=mouseover();
doMenu(idpad); onclick=windoweventreturnValue=false;>菜单项二</A>
……
</DIV>
接着我们根据主菜单条的个数定义相应的子菜单为每个子菜单定义一个区域该区域中第一个元素是一条横线然后每个子菜单作为一个超链接置于该区域中由于子菜单纵向排列每个超链接后加<BR>换行当然这个区域现在还不能显示出来但当它被激活时其显示位置应位于其他对象之上所以其style属性置为STYLE= display:none; zindex:; 注意每个超链接的ID均应与其主菜单的ID相同以便于统一处理格式见程序
<SPAN ID=idpad STYLE=display:none; zindex:; onmouseout=hideMenu();>
<HR STYLE=position:absolute;left:;top:;color:white SIZE=>
<DIV >
<A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一一</A><BR>
<A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一二</A><BR>
<HR STYLE=color:white SIZE=><!如有必要可以用横线对子菜单分组>
<A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一三</A><BR>
……
</DIV>
</SPAN>
经过上面的步骤下拉菜单的格式已经定义好了下面的任务就是控制这些子菜单的显示和隐藏
当鼠标移动到主菜单条上时应显示其子菜单我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成过程的参数MenuID是代表子菜单的区域的ID过程执行时先设置windowevent cancelBubble = true并计算子菜单显示的位置包括左上角和右下角坐标然后执行下列语句来显示子菜单所在区域
CurMenustyleclip = rect( ) ;CurMenustyledisplay = block;
当鼠标移出主菜单时有两种情况一种情况是鼠标在子菜单及其主菜单之间移动这时不能隐藏子菜单另一种情况是鼠标移出了子菜单及其主菜单的区域这时需要隐藏子菜单我们通过执行hideMenu()响应主菜单的onmouseout同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成
网页中的另外两个函数mouseout() 和mouseover() 的功能很简单分别用于处理鼠标移动时菜单项的颜色变化
网页浏览运行环境为IE以上版本
<HTML>
<HEAD>
<TITLE>网页中的下拉菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE=JavaScript >
var IsDroped =false;
function mouseout()
{
windoweventlor = white;//鼠标移开时置为白色
}
function mouseover()
{
windoweventlor = red;//鼠标进入时置为红色//鼠标进入时置为红色
}
function doMenu(MenuID)
{
var CurMenu = documentall(MenuID);
//为避免闪烁如果下拉菜单已经显示则不重画
if (IsDroped==true)
{
windoweventcancelBubble = true;
return false;
}
windoweventcancelBubble = true;
TempMenu = CurMenu;
//计算下拉菜单的位置
x = windoweventsrcElementoffsetLeft + windoweventsrcElementoffsetParentoffsetLeft;
x = x + windoweventsrcElementoffsetWidth;
y = padoffsetHeight;
CurMenustyletop = y;
CurMenustyleleft = x;
CurMenustyleclip = rect( );
CurMenustyledisplay = block;
//延时毫秒后再显示菜单保证ToolbarmenuoffsetHeight有值避免从主菜单移向下拉菜单时下拉菜单消失
windowsetTimeout(showMenu() );
return true;
}
function showMenu()
{
y = y + TempMenuoffsetHeight;
TempMenustyleclip = rect(auto auto auto auto);
IsDroped =true;//下拉菜单已经显示
}
function hideMenu()
{
//如果在下拉菜单的范围之内移动则不隐藏
cY = eventclientY + documentbodyscrollTop;
if (cY>=y && cY<y && eventclientX >= (x+) && eventclientX <= x ||
cY> && cY<y && eventclientX >= (x+) && eventclientX <= x)
{ windoweventcancelBubble = true; return;}
//隐藏
TempMenustyledisplay = none;
windoweventcancelBubble = true;
IsDroped =false;
}
</SCRIPT>
<body topmargin= leftmargin= marginheight= marginwidth=>
<DIV ID=menu STYLE=position:absolute;backgroundcolor:white;width:%;top:;left:;>
<DIV ID=pad STYLE=position:relative;height:;width:%;font:bold pt 宋体;backgroundcolor:#FFF;color:white;>
<A TARGET=_top TITLE= ID=pad
onmouseout=mouseout(); hideMenu(); onmouseover=mouseover(); doMenu(idpad);>
菜单项一
</A>
<SPAN > </SPAN>
<A TARGET=_top TITLE= ID=pad
onmouseout=mouseout(); hideMenu(); onmouseover=mouseover(); doMenu(idpad);
onclick=windoweventreturnValue=false;>
菜单项二
</A>
</DIV>
</DIV>
<SPAN ID=idpad STYLE=display:none;position:absolute;width:;backgroundcolor:#FFF;paddingtop:;paddingleft:;paddingbottom:;zindex:;
onmouseout=hideMenu();>
<HR STYLE=position:absolute;left:;top:;color:white SIZE=>
<DIV STYLE=position:relative;left:;top:;>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一一
</A><BR>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一二
</A><BR>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项一三
</A>
</DIV>
</SPAN>
<SPAN ID=idpad STYLE=display:none;position:absolute;width:;backgroundcolor:#FFF;paddingtop:;paddingleft:;paddingbottom:;zindex:; onmouseout=hideMenu();>
<HR STYLE=position:absolute;left:;top:;color:white SIZE=>
<DIV STYLE=position:relative;left:;top:;>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项二一</A><BR>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项二二</A><BR>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
HREF= TARGET=_top
onmouseout=mouseout(); onmouseover=mouseover()>
子菜单项二三</A><BR>
<HR STYLE=color:white SIZE=><!分隔行>
<A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋体;color:white
onclick=parentclose()
onmouseout=mouseout(); onmouseover=mouseover()>
退出系统</A>
</DIV>
</SPAN>
<!页面的其它内容>
</BODY>
</HTML>
