Dies ist ein sehr einfaches Menü, obwohl es einfach ist, können wir aus diesem Beispiel einige relevante Kenntnisse über CSS und JavaScripts lernen, was für das Verständnis der Prinzipien und Grundlagen der Erstellung von Dropdown-Menüs von großem Nutzen ist. In diesem Beispiel habe ich ein DIV-Tag als Spalte meines Dropdown-Menüs und eine TABLE als Kopfzeile meines Menüs verwendet. Das Prinzip besteht darin, die Anzeigeattribute der Dropdown-Menüspalte durch Erkennung von Mausbewegungen umzuschalten.
Das Folgende ist die Auswirkung dieses DIV-Menüs. Sie können auf eine beliebige leere Stelle auf der Seite klicken, um die Anzeige des Dropdown-Menüs abzubrechen.
Magazin-Technologie-Site-Portal-Site, persönliche Sammlungs-Site
Yesky.com
Informationen für Computerhändler
trendige Elektronik
Sina
Sohu Sohu
Netease Netease
Maus-Netzwerk-Programmierstation
Chinesischer Klassenkameradenrekord
Nun,
China Software Development Network
, wenn ich Ihnen sagen würde, dass ein solcher Effekt nur Dutzende Zeilen Code erfordern würde, würden Sie es glauben?Wie auch immer, lassen Sie uns Schritt für Schritt lernen, wie man dieses Menü erstellt. Schritt für Schritt, los geht's.
Der erste Schritt besteht darin, die CSS-Cascading-Stylesheets für Menüelemente und Menüspalten zu definieren. Wenn Sie nicht wissen, was CSS bedeutet, lesen Sie bitte das Tutorial zu CSS in „Computer News Website“. Wir definieren zwei CSS-Klassen, eine ist Meun und die andere ist SubMenu. Menu definiert den Stil, der oben im Menü angezeigt wird, und Submenu definiert den Anzeigestil der Dropdown-Menüspalte. Hier ist das CSS-Attribut „position:absolute;width:200“ im Untermenü zu beachten. Dies ist notwendig, da es die Position bestimmt, an der wir das Untermenü anzeigen. Andere CSS-Eigenschaften sind optional. Im Folgenden finden Sie eine Beschreibung dieser beiden CSS-Klassen. Sie können den folgenden Absatz zwischen