Menu déroulant de conception Javascript dans la page Web

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

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

　　

 

　　菜单项一 

　　菜单项二 

　　…… 

　　

　　 

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

　　 

　　

---

 

　　

 

　　  

　　 子菜单项一一
 

　　  

　　 子菜单项一二
 

　　

---

 

　　  

　　 子菜单项一三
 

　　…… 

　　

　

Après les étapes ci-dessus, le format du menu déroulant a été défini. La tâche suivante consiste à contrôler l'affichage et le masquage de ces sous-menus.

Lorsque la souris se déplace vers la barre de menu principale, son sous-menu doit être affiché. Nous faisons cela en exécutant doMenu(MenuID) en réponse à l'événement onmouseover du menu principal. Le paramètre MenuID du processus est l'ID de la zone représentant le sous-menu Lorsque le processus est exécuté, window.event.cancelBubble = true est d'abord défini et la position de l'affichage du sous-menu est calculée, y compris le coin supérieur gauche et le coin inférieur. coordonnées du coin droit. Exécutez ensuite l'instruction suivante pour afficher la zone où se trouve le sous-menu :

CurMenu.style.clip = "rect(0 0 0 0) "; CurMenu.style.display = "block";
Quand Il existe deux situations dans lesquelles la souris quitte le menu principal. L'une est lorsque la souris se déplace entre le sous-menu et son menu principal, et le sous-menu ne peut pas être masqué à ce moment-là ; sort de la zone du sous-menu et de son menu principal. À ce stade, vous devez masquer le sous-menu. Nous complétons cela en exécutant hideMenu() pour répondre à l'événement onmouseout du menu principal, et en même temps en exécutant hideMenu() pour répondre à l'événement onmouseout de la zone où se trouve le sous-menu.

Les fonctions des deux autres fonctions mouseout() et mouseover() dans la page Web sont très simples. Elles sont utilisées pour gérer le changement de couleur des éléments de menu lorsque la souris bouge.

Pour le code source complet, veuillez vous référer au site Web « Électronique et informatique » www.pccomputing.com.cn.

L'effet de la navigation Web est illustré dans la figure 1. L'environnement d'exécution est IE4.0 ou supérieur.

　(Note photo WANGYE) Figure 1

　

　

　
　>
　

　　

 

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');"> 

　　 菜单项一 

　　  

　　  

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"

　　 onclick="window.event.returnValue=false;"> 

　　 菜单项二 

　　  

　　

 

　　

 

　　
　　 onmouseout='hideMenu();'> 

　　

---

 

　　

 

　　
　　 HREF='11.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一一 

　　
 

　　
　　 HREF='12.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一二 

　　
 

　　
　　 HREF='13.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一三 

　　  

　　

 

　　 　　 

　　 

　　

---

 

　　

 

　　
　　 HREF='21.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二一
 

　　
　　 HREF='22.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二二
 

　　
　　 HREF='23.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二三
 

　　

---

 

　　
　　 onclick="parent.close()"

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 退出系统 

　　

　

　 le contenu du menu déroulant de la page Web de conception Javascript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !