Dropdown-Menü für Javascript-Design auf der Webseite-js-Tutorial-php.cn

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

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

　　

　　菜单项一

　　菜单项二

　　……

　　

　　

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

　　 Nach den obigen Schritten wurde das Format des Dropdown-Menüs definiert. Die nächste Aufgabe besteht darin, die Anzeige und das Ausblenden dieser Untermenüs zu steuern.

Wenn sich die Maus zur Hauptmenüleiste bewegt, sollte deren Untermenü angezeigt werden. Dies erreichen wir, indem wir doMenu(MenuID) als Reaktion auf das onmouseover-Ereignis des Hauptmenüs ausführen. Der Parameter MenuID des Prozesses ist die ID des Bereichs, der das Untermenü darstellt. Wenn der Prozess ausgeführt wird, wird zuerst window.event.cancelBubble = true gesetzt und die Position der Untermenüanzeige berechnet, einschließlich der oberen linken Ecke und der unteren Koordinaten der rechten Ecke. Führen Sie dann die folgende Anweisung aus, um den Bereich anzuzeigen, in dem sich das Untermenü befindet:

CurMenu.style.clip = "rect(0 0 0 0) "; CurMenu.style.display = "block";
Wann Es gibt zwei Situationen, in denen sich die Maus aus dem Hauptmenü bewegt: Eine Situation ist, wenn sich die Maus zwischen dem Untermenü und seinem Hauptmenü bewegt, und die andere Situation ist, wenn die Maus zu diesem Zeitpunkt nicht ausgeblendet werden kann Verlässt den Bereich des Untermenüs und seines Hauptmenüs. Zu diesem Zeitpunkt müssen Sie das Untermenü ausblenden. Wir vervollständigen dies, indem wir hideMenu() ausführen, um auf das Onmouseout-Ereignis des Hauptmenüs zu reagieren, und gleichzeitig hideMenu() ausführen, um auf das Onmouseout-Ereignis des Bereichs zu reagieren, in dem sich das Untermenü befindet.

Die Funktionen der anderen beiden Funktionen „mouseout()“ und „mouseover()“ auf der Webseite sind sehr einfach. Sie werden verwendet, um die Farbänderung von Menüelementen zu handhaben, wenn die Maus bewegt wird.

Den vollständigen Quellcode finden Sie auf der Website „Electronics and Computers“ www.pccomputing.com.cn.

Die Auswirkung des Surfens im Internet ist in Abbildung 1 dargestellt. Die Ausführungsumgebung ist IE4.0 oder höher.

　(Bildnotiz WANGYE) Abbildung 1

　 /TITLE>

　

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse