当前位置：首页 -> 技术开发 -> Script -> Javascript设计网页中的下拉菜单

Javascript设计网页中的下拉菜单

时间： 2021-07-31 作者：daque

在网页创造时，为了更好地构造消息，使表露的消息分门别类精确、档次明显，网页创造者常常处心积虑。常用的本领有效树型构造表露消息，用表格举行网页构造，用框架(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' 　　 onmouseout="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设计网页中的下拉菜单

相关推荐

推荐下载

热门阅览

最新排行