Javascript设计网页中的下拉菜单
根据上述下拉菜单的特点,我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域,用于显示主菜单条,每一个主菜单条作为一个超链接横向置于该区域中,当然除非菜单项没有子菜单,一般情况下这里的超链接不指向任何地址,只用它来激活子菜单。区域的格式见程序1。 dedecms.com
<DIV ID='pad' ……>
dedecms.com
<A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); dedecms.com
doMenu('idpad1');" onclick="window.event.returnValue=false;">菜单项一</A>
<A ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
内容来自dedecms
doMenu('idpad2');" onclick="window.event.returnValue=false;">菜单项二</A> copyright dedecms
……
</DIV>
本文来自织梦
接着,我们根据主菜单条的个数定义相应的子菜单,为每个子菜单定义一个区域,该区域中第一个元素是一条横线,然后每个子菜单作为一个超链接置于该区域中,由于子菜单纵向排列,每个超链接后加<BR>换行。当然这个区域现在还不能显示出来,但当它被激活时,其显示位置应位于其他对象之上,所以其style属性置为STYLE=' display:none; z-index:9;'。 注重每个超链接的ID均应与其主菜单的ID相同,以便于统一处理。格式见程序2。 copyright dedecms
<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()">
内容来自dedecms
子菜单项一一</A><BR> 织梦内容管理系统
<A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜单项一二</A><BR>
内容来自dedecms
<HR STYLE='color:white' SIZE=1><!--如有必要可以用横线对子菜单分组--> copyright dedecms
<A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()">
本文来自织梦
子菜单项一三</A><BR> copyright dedecms
…… 织梦好,好织梦
</DIV> copyright dedecms
</SPAN>
copyright dedecms
经过上面的步骤,下拉菜单的格式已经定义好了,下面的任务就是控制这些子菜单的显示和隐藏。 织梦好,好织梦
当鼠标移动到主菜单条上时,应显示其子菜单,我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID,过程执行时先设置window.event. cancelBubble = true,并计算子菜单显示的位置,包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域: 本文来自织梦
CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block"; dedecms.com
当鼠标移出主菜单时有两种情况,一种情况是鼠标在子菜单及其主菜单之间移动,这时不能隐藏子菜单;另一种情况是鼠标移出了子菜单及其主菜单的区域,这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout,同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。
文章评论
共有位Admini5网友发表了评论 查看完整内容