Das Dropdown-Menü ist einer der häufigsten Effekte im Internet. Klicken Sie einfach darauf oder bewegen Sie die Maus darüber, und es wird ein detaillierteres Menü angezeigt. Es spart nicht nur Platz im Webseitenlayout, sondern macht das Webseitenlayout prägnanter ordentlich, aber auch neuartig. Das schöne Dropdown-Menü verleiht Ihrer Webseite viel Farbe.
Es gibt viele Möglichkeiten, Dropdown-Menüs zu erstellen. In dieser Kolumne werden Ihnen vier häufig verwendete Methoden vorgestellt, mit denen Sie Ihr eigenes Dropdown-Menü nach Ihren Wünschen erstellen können.
■ Verwenden Sie Dreamweaver, um Dropdown-Menüs zu erstellen
„Dreamweaver ist das am häufigsten verwendete Tool zum Erstellen von Dropdown-Menüs. Es verfügt über eine einfache Methode und freie Steuerung. Es kann Menüstile in maximalem Umfang erstellen.
„Das Prinzip der Verwendung von Dreamweaver zum Erstellen eines Dropdown-Menüs ist sehr einfach. Es verwendet die integrierte Methode „Ebenen anzeigen/ausblenden“ im Bedienfeld „Verhalten“ und verwendet „onMouseOver“ (Maus bewegt sich dorthin) und „onMouseOut“ (Maus bewegt sich weg). Lösen Sie das Ein- und Ausblenden der Ebene aus, und das angezeigte Menü befindet sich in der Ebene.
„Deshalb können wir ein Dropdown-Menü in vier Schritten erstellen. Zuerst benötigen wir eine Navigationsleiste, mit der wir das Hauptmenü platzieren, das zuerst vor dem Betrachter angezeigt wird. Anschließend erstellen wir das Dropdown-Menü wird nach dem Ausblenden angezeigt. Der wichtigste Schritt besteht darin, dem Hauptmenü und dem Dropdown-Menü den Effekt des Ausblendens und Anzeigens von Ebenen hinzuzufügen. Der endgültige Effekt, den Sie sehen, ist in der Abbildung dargestellt. Sie können auch die folgende Adresse besuchen: menu.htm
??Ich glaube, Sie können nicht länger warten, also fangen wir gleich an!
1. Erstellung der Navigationsleiste
Führen Sie zunächst einige notwendige Vorarbeiten durch. Drücken Sie STRG+J, um das Fenster „Seiteneigenschaften“ zu öffnen. Die Parametereinstellungen sind wie in Abbildung 2 dargestellt. Diese Einstellung wirkt sich auf die Position des Menüs aus Bild.
Drücken Sie STRG+F2, um das Bedienfeld „Objekte“ zu öffnen, und klicken Sie auf die Schaltfläche „Ebene“.
Halten Sie abschließend die Maustaste gedrückt, ziehen Sie eine Ebene auf der Seite und legen Sie dann die Parameter im Eigenschaftenfenster der Ebene fest. Geben Sie den Titel in das Feld „Ebenen-ID“ ein und füllen Sie die Felder „L“, „T“, „B“ und „H“ aus mit 8, 15 bzw. 15, füllen Sie die Hintergrundfarbe mit #006699 aus, wie im Bild gezeigt.
Bewegen Sie den Cursor in die Ebene und klicken Sie im Bedienfeld „Objekte“ auf die Tabellenschaltfläche
, fügen Sie eine Tabelle mit einer Zeile und vier Spalten ein und richten Sie sie wie in der Abbildung gezeigt ein.
Halten Sie die STRG-Taste gedrückt und klicken Sie auf die vier Zellen der Tabelle. Stellen Sie dann deren Breite auf 120 ein und geben Sie Text in die ersten beiden Zellen ein. Dies ist der Name Ihres Hauptmenüs. Sie können den von mir gewünschten Namen eingeben „Classic Forum“ und „Tianji.com“ als Beispiele und hinzugefügte Links.
2. Erstellung eines Dropdown-Menüs
Beginnen Sie nun mit der Erstellung des Menüs, das als Dropdown-Menü angezeigt wird, und verwenden Sie dabei ebenfalls Ebenen.
Fügen Sie erneut eine Ebene aus dem Bedienfeld „Objekte“ unter der zuvor erstellten Navigationsleiste ein. Geben Sie die Parameter wie folgt ein: Füllen Sie das Feld „Ebenen-ID“ mit „menu1“ aus, füllen Sie die Felder „L“, „T“, „B“ und „H“ mit 8, 34, 120 aus , bzw. 80. Füllen Sie die Hintergrundfarbe mit #999966 aus. Die beiden Parameter L und T dienen dazu, den Abstand zwischen dieser Ebene und dem linken und oberen Rand des Fensters festzulegen. Sie dürfen nicht falsch ausgefüllt werden, da sonst das Menü fehlerhaft ist verlegt werden und die Nutzbarkeit nach Fertigstellung beeinträchtigt sein.
Zu diesem Zeitpunkt können wir den gewünschten Menüinhalt in die Ebene „menu1“ eingeben. Aus Gründen der Vereinfachung des Layouts verwende ich hier immer noch Tabellen, um Menüs zu erstellen. Diese Ebene wird als Dropdown-Menü für „Klassisches Forum“ angezeigt. Geben Sie die benötigten Menülinks ein. Erstellen Sie auf die gleiche Weise ein Dropdown-Menü (Ebenenmenü2) für „Tianji.com“.
Bei diesem Schritt ist zu beachten, dass die Position der Ebene (Menü1, Menü2), auf der sich das Dropdown-Menü befindet, sehr wichtig ist (bestimmt durch die beiden Parameter L und T). Ihr oberer Rand sollte nahe am unteren Rand der Navigationsleiste liegen, um sicherzustellen, dass das Menü nach Abschluss des dritten Schritts normal genutzt werden kann. Denn wenn Sie sich von der Navigationsleiste fernhalten, verschwindet das Menü, sobald die Maus die Navigationsleiste verlässt.
Drücken Sie F2, um das Ebenenbedienfeld zu öffnen, in dem die drei Ebenen auf der Webseite aufgelistet sind. Klicken Sie auf die Leerstelle vor Menü1 und Menü2. Das Symbol mit dem geschlossenen Auge wird angezeigt und diese beiden Ebenen werden ausgeblendet. Dieser Schritt wird durchgeführt, da der Anfangszustand des Dropdown-Menüs unsichtbar ist.
3. Hinzufügen von Ein- und Ausblendeffekten
Dieser Schritt ist ein entscheidender Schritt, um Verfall in Magie zu verwandeln. Bitte folgen Sie mir sorgfältig.
Dieser Schritt ist in zwei Teile unterteilt: Erstens fügen Sie einen Befehl hinzu, um die Anzeige und Ausblendung des Hauptmenüs in der Navigationsleiste zu steuern. Zweitens fügen Sie einen Befehl hinzu, um die Anzeige und Ausblendung des Dropdown-Menüs selbst zu steuern.
1. Halten Sie im Navigationsleistenbereich zunächst die STRG-Taste gedrückt und klicken Sie auf die erste Zelle in der Navigationsleiste. Drücken Sie nun Umschalt+F3, um das Verhaltensfenster zu öffnen, und klicken Sie
Klicken Sie auf die Schaltfläche und wählen Sie „Ebenen ein-/ausblenden“ in der Dropdown-Option (wie im Bild gezeigt). Wenn es in den Optionen kein solches Element gibt, wählen Sie IE 5.0 unter „Ereignisse anzeigen für“ aus, klicken Sie erneut auf die Schaltfläche und „Ebenen ein-/ausblenden“ wird angezeigt.
Es öffnet sich ein Fenster, wie unten gezeigt. Im Feld „Benannte Ebenen“ werden alle Ebenen der aktuellen Webseite aufgelistet. Wählen Sie „Ebene „Menü1““, da die Ebene „Menü1“ auf das „Klassische Forum“ reagieren soll. Klicken Sie dann unten auf die Schaltfläche „Anzeigen“ und auf OK.
Jetzt kehren Sie zum Fenster „Verhalten“ zurück und die unten gezeigten Wörter werden im Fenster angezeigt. Klicken Sie auf den Text „onClick“ unter „Ereignisse“. Klicken Sie darauf und wählen Sie „onMouseOver“ aus. Down-Option. Der Zweck dieses Schritts besteht darin, den Status des Dropdown-Menüs „menu1“ in „Anzeigen, wenn die Maus zur ersten Zelle bewegt“ zu ändern.
Der nächste Schritt besteht darin, das Dropdown-Menü „menu2“ auszublenden, wenn die Maus zur zweiten Zelle bewegt wird.
Bestellen Sie erneut Klicken Sie auf die Schaltfläche, wählen Sie „Ebenen ein-/ausblenden“ in der Dropdown-Option und wählen Sie im Popup-Fenster „Ebene „Menü1““ aus, da die Ebene „Menü1“ auf „Klassisches Forum“ reagieren soll. Klicken Sie dann unten auf die Schaltfläche „Ausblenden“ und auf OK.
Kehren Sie zum Fenster „Verhalten“ zurück, klicken Sie auf den kleinen Abwärtspfeil und wählen Sie in der Dropdown-Option „onMouseOut“ aus.
2. Wählen Sie im Dropdown-Menüteil zunächst die Ebene „menu1“ aus, indem Sie auf den Rand der Ebene klicken oder im Ebenenbedienfeld auf „menu1“ klicken. Verwenden Sie dieselbe Methode wie im Navigationsleistenteil, um Befehle hinzuzufügen, um sich im Verhaltensfenster anzuzeigen und auszublenden . Dies hat zur Folge, dass beim Verlassen der Ebene „Menü1“ die Ebene „Menü1“ automatisch ausgeblendet wird. Der Status der letzten Ebene von Menü1 ist wie in der Abbildung dargestellt.
3． Wiederholen Sie die beiden oben genannten Teile und fügen Sie Ebenenbefehle zum Ein- und Ausblenden für das zweite Hauptmenü „Tianji.com“ und Ebenenmenü2 der Navigationsleiste hinzu.
4. Verschönerung und Änderung von Dropdown-Menüs
Zu diesem Zeitpunkt ist der funktionale Effekt des Dropdown-Menüs implementiert und Sie können ihn jetzt sehen, indem Sie F12 drücken. Allerdings müssen Sie auch feststellen, dass das Menü etwas hässlich ist, die Schriftarten nicht gut genug sind, die Standard-Linkfarbe der Menüoptionen nicht gut aussieht und das Menü keine Ränder hat, also geben wir ihm etwas Schönheit .
1. Definieren Sie den Schriftstil des Menüs. Drücken Sie Umschalt+F11, um das Bedienfeld „CSS-Stil“ zu öffnen, und klicken Sie unter das Bedienfeld.
Taste
Wählen Sie das td-Tag im Tag-Feld des Popup-Fensters „Neuer Stil“ aus, wählen Sie das zweite Element „HTML-Tag neu definieren“ als Typ aus und wählen Sie „Nur dieses Dokument“ als „Definieren“ aus, wie in der Abbildung gezeigt.
Zu diesem Zeitpunkt wird das Einstellungsfenster angezeigt. Wählen Sie unabhängig von anderen Dingen einfach 12 im Feld „Größe“ auf der rechten Seite aus und die Einheit ist Pixel.
2. Definieren Sie den Stil des Menü-Links. Klicken Sie im Popup-Fenster auf die Schaltfläche „CSS-Auswahl verwenden“ und wählen Sie im Feld „Tag“ das Tag „a:hover“ aus Nur für Definieren, wie in der Abbildung gezeigt.
Nachdem Sie auf „OK“ geklickt haben, geben Sie im Popup-Fenster „#ff9933“ für „Farbe“ ein, wählen Sie „Keine“ für „Dekoration“ aus und klicken Sie auf „OK“.
Kehren Sie zum Stilbedienfeld zurück und klicken Sie unter das Bedienfeld Wählen Sie im Popup-Fenster das dritte Element „CSS-Selektor verwenden“ für „Typ“ aus, wählen Sie das Tag „a:link“ im Feld „Tag“ aus und wählen Sie „Nur dieses Dokument“ für „Definieren“.
Nachdem Sie auf „OK“ geklickt haben, geben Sie im Popup-Fenster „#ffffff“ für „Farbe“ ein, wählen Sie „Keine“ für „Dekoration“ aus und klicken Sie auf „OK“.
Kehren Sie zum Stilbedienfeld zurück und klicken Sie unter das Bedienfeld Wählen Sie im Popup-Fenster das dritte Element „CSS-Selektor verwenden“ für „Typ“ aus, wählen Sie das Tag „a:visited“ im Feld „Tag“ aus und wählen Sie „Nur dieses Dokument“ für „Definieren“.
Nachdem Sie auf „OK“ geklickt haben, geben Sie im Popup-Fenster „#ffffff“ für „Farbe“ ein, wählen Sie „Keine“ für „Dekoration“ aus und klicken Sie auf „OK“.
3． Definieren Sie den Menürahmenstil im Stilbedienfeld, klicken Sie auf die Schaltfläche unter dem Bedienfeld, wählen Sie im Popup-Fenster das td-Tag im Feld „Tag“ aus, wählen Sie das zweite Element „HTML-Tag neu definieren“ für „Typ“ und wählen Sie „Nur dieses Dokument“ für „Definieren“. , wie in der Abbildung gezeigt.
Das Einstellungsfenster wird geöffnet. Wählen Sie in der Liste links „Rahmen“ aus, geben Sie die Breite der vier Seiten rechts als 1 ein, stellen Sie die Farbe auf Schwarz #000000 ein und wählen Sie „Vollton“ als Stil.
An diesem Punkt ist es uns gelungen. Nutzen Sie es jetzt auf Ihrer Webseite.