知识大全 Javascript设计网页中的下拉菜单

Posted 2022-07-14 菜单

篇首语：卧疾丰暇豫，翰墨时间作。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Javascript设计网页中的下拉菜单相关的知识，希望对你有一定的参考价值。

Javascript设计网页中的下拉菜单 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

在网页制作时为了更好地组织信息使显示的信息分类明确层次清晰网页制作者往往费尽心机常用的方法有用树型结构显示信息用表格进行网页布局用框架(frame)组织页面等等但对于习惯了Windows操作系统的用户来说利用菜单操作可以算是最自然的方法了下面我们就来看一下怎样在网页中设计下拉式菜单　　下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成每个子菜单往往还包含几个子菜单项通常只有菜单条显示在窗口中并且当鼠标指针指向菜单条时菜单条的子菜单才显示出来当鼠标指针离开菜单时子菜单则隐藏起来回到只显示主菜单条的状态　　根据上述下拉菜单的特点我们就可以开始在网页中制作下拉菜单了我们在网页的顶部放置一个区域用于显示主菜单条每一个主菜单条作为一个超链接横向置于该区域中当然除非菜单项没有子菜单一般情况下这里的超链接不指向任何地址只用它来激活子菜单区域的格式见程序　　<DIV ID= pad ……> 　　<A ID= pad onmouseout= mouseout(); hideMenu(); onmouseover= mouseover(); 　　doMenu( idpad ); onclick= window event returnValue=false; >菜单项一</A> 　　<A ID= pad onmouseout= mouseout(); hideMenu(); onmouseover= mouseover(); 　　doMenu( idpad ); onclick= window event returnValue=false; >菜单项二</A> 　　…… 　　</DIV> 　　　　接着我们根据主菜单条的个数定义相应的子菜单为每个子菜单定义一个区域该区域中第一个元素是一条横线然后每个子菜单作为一个超链接置于该区域中由于子菜单纵向排列每个超链接后加<BR>换行当然这个区域现在还不能显示出来但当它被激活时其显示位置应位于其他对象之上所以其style属性置为STYLE= display:none; z index: ; 注意每个超链接的ID均应与其主菜单的ID相同以便于统一处理格式见程序　　<SPAN ID= idpad STYLE= display:none; z index: ; 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 过程执行时先设置window event cancelBubble = true 并计算子菜单显示的位置包括左上角和右下角坐标然后执行下列语句来显示子菜单所在区域　　CurMenu style clip = rect( ) ;CurMenu style display = block ; 　　当鼠标移出主菜单时有两种情况一种情况是鼠标在子菜单及其主菜单之间移动这时不能隐藏子菜单另一种情况是鼠标移出了子菜单及其主菜单的区域这时需要隐藏子菜单我们通过执行hideMenu()响应主菜单的onmouseout 同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成　　网页中的另外两个函数mouseout() 和mouseover() 的功能很简单分别用于处理鼠标移动时菜单项的颜色变化　　网页浏览运行环境为IE 以上版本　　<HTML> 　　<HEAD> 　　<TITLE>网页中的下拉菜单</TITLE> 　　</HEAD> 　　<SCRIPT LANGUAGE= JavaScript > 　　var IsDroped =false; 　　function mouseout() 　　　　 window event lor = white ;//鼠标移开时置为白色　　　　function mouseover() 　　　　 window event lor = 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; 　　 x = x + window event srcElement offsetWidth; 　　 y = pad offsetHeight; 　　 CurMenu style top = y; 　　 CurMenu style left = x; 　　 CurMenu style clip = rect( ) ; 　　 CurMenu style display = block ; 　　 //延时毫秒后再显示菜单保证Toolbarmenu offsetHeight有值避免从主菜单移向下拉菜单时下拉菜单消失　　 window setTimeout( showMenu() ); 　　 return true; 　　　　function showMenu() 　　　　 y = 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<y && event clientX >= (x+ ) && event clientX <= x || 　　 cY> && cY<y && event clientX >= (x+ ) && event clientX <= x ) 　　 window event cancelBubble = true; return; 　　 //隐藏　　 TempMenu style display = none ; 　　 window event cancelBubble = true; 　　 IsDroped =false; 　　　　</SCRIPT> 　　<body topmargin= leftmargin= marginheight= marginwidth= > 　　<DIV ID= menu STYLE= position:absolute;background color:white;width: %;top: ;left: ; > 　　 <DIV ID= pad STYLE= position:relative;height: ;width: %;font:bold pt 宋体;background color:# 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= window event returnValue=false; > 　　菜单项二　　 </A> 　　 </DIV> 　　</DIV> 　　<SPAN ID= idpad STYLE= display:none;position:absolute;width: ;background color:# FFF;padding top: ;padding left: ;padding bottom: ;z index: ; 　　 onmouseout= hideMenu(); > 　　 <HR STYLE= position:absolute;left: ;top: ;color:white SIZE= > 　　 <DIV STYLE= position:relative;left: ;top: ; > 　　 <A ID= pad STYLE= text decoration:none;cursor:hand;font:bold pt 宋体;color:white 　　 HREF= TARGET= _top 　　 onmouseout= mouseout(); onmouseover= mouseover() > 　　子菜单项一一　　 </A><BR> 　　 <A ID= pad STYLE= text decoration:none;cursor:hand;font:bold pt 宋体;color:white 　　 HREF= TARGET= _top 　　 onmouseout= mouseout(); onmouseover= mouseover() > 　　子菜单项一二　　 </A><BR> 　　 <A ID= pad STYLE= text decoration: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: ;background color:# FFF;padding top: ;padding left: ;padding bottom: ;z index: ; onmouseout= hideMenu(); > 　　 <HR STYLE= position:absolute;left: ;top: ;color:white SIZE= > 　　 <DIV STYLE= position:relative;left: ;top: ; > 　　 <A ID= pad STYLE= text decoration:none;cursor:hand;font:bold pt 宋体;color:white 　　 HREF= TARGET= _top 　　 onmouseout= mouseout(); onmouseover= mouseover() > 　　子菜单项二一</A><BR> 　　 <A ID= pad STYLE= text decoration:none;cursor:hand;font:bold pt 宋体;color:white 　　 HREF= TARGET= _top 　　 onmouseout= mouseout(); onmouseover= mouseover() > 　　子菜单项二二</A><BR> 　　 <A ID= pad STYLE= text decoration: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= text decoration:none;cursor:hand;font:bold pt 宋体;color:white 　　 onclick= parent close() 　　 onmouseout= mouseout(); onmouseover= mouseover() > 　　退出系统</A> 　　 </DIV> 　　</SPAN> 　　<! 页面的其它内容 > 　　</BODY> 　　</HTML> cha138/Article/program/Java/JSP/201311/19645