您现在正在浏览：站长之家 >> 设计编程 >> 详细内容

Javascript设计网页中的下拉菜单

时间:2007-12-27 来源:不详作者:林子

在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清楚，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。　　下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。

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

dedecms.com

　　<A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); dedecms.com

　　doMenu('idpad1');" onclick="window.event.returnValue=false;">菜单项一</A>

dedecms.com

　　<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

织梦好，好织梦

　　 <DIV > 本文来自织梦

内容来自dedecms

　　子菜单项一一</A><BR> 织梦内容管理系统

内容来自dedecms

　　子菜单项一二</A><BR>

内容来自dedecms

<HR STYLE='color:white' SIZE=1> copyright dedecms

本文来自织梦

　　子菜单项一三</A><BR> copyright dedecms

　　…… 织梦好，好织梦

　　 </DIV> copyright dedecms

　　</SPAN> 　　

　　经过上面的步骤，下拉菜单的格式已经定义好了，下面的任务就是控制这些子菜单的显示和隐藏。织梦好，好织梦

　　当鼠标移动到主菜单条上时，应显示其子菜单，我们通过执行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事件来完成。