爱学记
您现在的位置是：首页
>
网页上的下拉菜单点击不显示 Javascript设计网页中的下拉菜单
Java cri t设计网页中的下拉菜单 在网页制作时 为了更好地组织信息 使显示的信息分类明确 层次清晰 网页制作者往往费尽心机 常用的方法有用树型结构显示信息 用表格进行网页布局 用框架 fram
Javascript设计网页中的下拉菜单
在网页制作时 为了更好地组织信息 使显示的信息分类明确 层次清晰 网页制作者往往费尽心机 常用的方法有用树型结构显示信息 用表格进行网页布局 用框架(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> lishixinzhi/Article/program/Java/JSP/201311/19645
很赞哦！ (1062)
微信收款码
支付宝收款码