Javascript design drop-down menu in web page

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

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

　　

 

　　菜单项一 

　　菜单项二 

　　…… 

　　

　　 

　　接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加
换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=' display:none; z-index:9;'。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。 

　　 

　　

---

 

　　

 

　　  

　　 子菜单项一一
 

　　  

　　 子菜单项一二
 

　　

---

 

　　  

　　 子菜单项一三
 

　　…… 

　　

　　 　　

　After the above steps, the format of the drop-down menu has been defined. The next task is to control the display and hiding of these submenus.

When the mouse moves over the main menu bar, its submenu should be displayed. We do this by executing doMenu(MenuID) in response to the onmouseover event of the main menu. The parameter MenuID of the process is the ID of the area representing the submenu. When the process is executed, window.event.cancelBubble = true is first set, and the position of the submenu display is calculated, including the upper left corner and lower right corner coordinates. Then execute the following statements to display the area where the submenu is located:

　CurMenu.style.clip = "rect(0 0 0 0) "; CurMenu.style.display = "block";

　There are two types of when the mouse moves out of the main menu In one case, the mouse moves between the submenu and its main menu, in which case the submenu cannot be hidden; in the other case, the mouse moves out of the area of ​​the submenu and its main menu, in which case the submenu needs to be hidden. We complete this by executing hideMenu() to respond to the onmouseout event of the main menu, and at the same time executing hideMenu() to respond to the onmouseout event of the area where the submenu is located.

　 The functions of the other two functions mouseout() and mouseover() in the web page are very simple. They are used to handle the color change of menu items when the mouse moves.

For the complete source code, please refer to the "Electronics and Computers" website www.pccomputing.com.cn.

　The effect of web browsing is shown in Figure 1. The operating environment is IE4.0 or above.

　　(Illustration WANGYE) Figure 1