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 <head></head> oder <body></body> der Website einfügen.
<STIL>
<!--
.menu {background-color:green;width:120; height:20;color: white;font-size:9pt;font-weight:bolder}
.submenu {position:absolute;top:40;hintergrundfarbe:hellgelb;breite:180;schriftgröße:9pt}
->
</STYLE>
Schauen wir uns im zweiten Schritt den Javascript-Code zum Ein- und Ausblenden von Dropdown-Menüspalten an. Dieser Code ist sehr einfach und sollte für jeden leicht zu verstehen sein, der sich ein wenig mit JavaScript auskennt. Wenn Sie Javascript nicht verstehen, lesen Sie bitte auch die Artikel über JavaScripts auf der „Computer News Website“. Die Bedeutung dieses Codes besteht darin, dass jedes Mal, wenn die Maus das Menüelement (Menü) betritt, dessen Dropdown-Menüspalte durch eine Funktion namens Show angezeigt wird. Die Hauptfunktion dieser Show-Funktion besteht darin, die aktuelle Dropdown-Menüspalte anzuzeigen, andere Menüspalten auszublenden und den aktuell angezeigten Menüpunkt in die Variable cm einzufügen. Darüber hinaus habe ich hier auch einen einfachen Mausklick-Ereignishandler (Onclick) hinzugefügt. Wenn die Maus auf die Webseite klickt, werden alle Dropdown-Menüspalten ausgeblendet. Im Folgenden gebe ich das gesamte Javascript-Programm an, das eine Funktion namens getPos enthält, mit der die Anzeigeposition der Dropdown-Menüspalte ermittelt wird.
<SKRIPT>
varcm=null;
document.onclick = neue Funktion("show(null)")
Funktion getPos(el,sProp)
{var iPos = 0
while (el!=null)
{iPos+=el["offset" + sProp]
el = el.offsetParent}
iPos zurückgeben}
Funktion show(el,m)
{if (m) {m.style.display='';
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>