Javascript设计网页中的下拉菜单

txf2004

浏览: 7040197 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript

我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。

CODE:　　<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。

CODE:　　<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，并计算子菜单显示的位置，包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域：

CODE:　　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

CODE:　　<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>

分享到：

用javascript+PHP随机显示图片 | 哀悼2008，寄望2009

2008-12-30 23:11
浏览 929
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论