ein neues Geschäft aufbauen

So erstellen Sie ein jQuery-Dropdown in WordPress

Obwohl Sie ein komplettes Dropdown-Menü in HTML und CSS (Cascading Style Sheets) codieren können, können Sie mit jQuery einige Animationen hinzufügen, die für alle Browser geeignet sind. JQuery ist eine Bibliothek, die JavaScript ergänzt und Designern das Schreiben von Skripten mit Programmierkenntnissen erleichtert. Einige Programmierkenntnisse helfen dabei. Das Anwenden von CSS- und jQuery-Effekten auf das von WordPress für Blogs generierte HTML-Format erfordert, dass Sie schlankes, flexibles CSS schreiben und prüfen, ob jQuery in die Warteschlange eingereiht ist.

Gestalten Sie das Menü mit CSS

1

Öffnen Sie die "style.css" -Datei für Ihr WordPress-Design mit einem Code-Editor oder einem Editor. Beginnen Sie damit, dem gesamten Menü eine relative Position zu geben:

.menu {position: relativ; }

Durch die relative Positionierung können Untermenüs absolut positioniert werden, ohne dass diese in die Ecken des Browserfensters verschoben werden. Verwenden Sie den Klassennamen "menu", um ein beliebiges Menü in einem WordPress-Design als Ziel festzulegen. WordPress fügt diese Klasse automatisch zu Menüs hinzu.

2

Verschieben Sie jedes Listenelement im Menü so, dass es links neben dem anderen ausgerichtet ist und einen horizontalen Balken bildet. Fügen Sie auch relative Positionen zu den Listenelementen hinzu:

.menu li {float: left; Position: relativ; }

3.

Gestalten Sie die Ankertags, die die Links innerhalb Ihres Menüs bilden. Füllen Sie die Links auf, entfernen Sie Textunterstriche und fügen Sie eine Hintergrundfarbe hinzu. Fügen Sie außerdem "display: block" hinzu, um die Verknüpfung auf Blockebene zu formen, sodass Sie die Auffüllung hinzufügen können:

.menu a {hintergrund: schwarze farbe: weiß; Schriftgröße: 18px; Schriftdicke: fett; Textdekoration: keine; Polsterung: 10px; Bildschirmsperre; }

Die Eigenschaft "Textdekoration" entfernt Unterstreichungen.

4

Legen Sie einen Hover-Status für die Links mithilfe der Pseudo-Klasse ": hover" fest:

.menu a: hover {hintergrund: # aa0000; }

In diesem Beispiel wird ein hexadezimaler Farbcode verwendet, um eine dunkelrote Farbe zu erstellen. Wenn der Benutzer den Mauszeiger über ein Menüelement bewegt, ändert sich der Hintergrund.

5

Blenden Sie die Untermenüs aus, indem Sie alle verschachtelten

    Tag-Inhalt links vom Browser-Bildschirm:

    .menu ul {position: absolut; links: -9999px; }

    Während "Display: None" ebenfalls funktioniert, ist diese Methode für blinde Besucher mit Screenreadern besser zugänglich.

    6

    Fügen Sie den Untermenüs „clear: both“ hinzu, um sie vertikal zu machen. Geben Sie den Untermenüs eine festgelegte Breite:

    .menu ul li {klar: beide; Breite: 200px; }

    7.

    Bringen Sie die Untermenüs zurück, wenn der Benutzer den Mauszeiger über seinen übergeordneten Eintrag bewegt, den Link auf der obersten Ebene in der Menüleiste:

    .menu li: hover ul {left: 0; }

    Schreiben Sie das jQuery-Skript

    1

    Öffnen Sie die Datei "header.php" für Ihr Design und prüfen Sie, ob es jQuery in eine Warteschlange stellt:

    Fügen Sie diesen Code über "" und dem Tag "" ein, wenn er nicht bereits vorhanden ist.

    2

    Öffnen Sie das Skript "footer.php" und suchen Sie nach einem Paar "

    3.

    Wählen Sie die Untermenüs aus und verwenden Sie die CSS-Funktion, um sie auszublenden:

    4

    Wählen Sie die Listenelemente in Ihrem Menü aus und fügen Sie mit dem Ereignis "Hover" Ihre Dropdown-Animation hinzu:

    jQuery ('. menu li'). hover (function () {jQuery (this) .find ('ul') .stop (true, true) .slideDown ('slow');});

    Dieser Code steht unter dem ersten "});", das sich bisher in Ihrem Skript befindet. In jQuery ist "jQuery (this)" ein Selektor, der den ersten Selektor der Funktion kopiert, in diesem Fall ".menu li". Die Funktion findet jeden

      ”Verschachteltes Element innerhalb des Listenbereichs, hält alle anderen Animationen an und schiebt die verschachtelte Liste - das Untermenü - nach unten.

      5

      Ändern Sie die Schieberegler-Funktion, um eine Animation hinzuzufügen, wenn der Benutzer den Mauszeiger von einem Menüelement weg bewegt. Sie können eine ausgeblendete Animation im Hover-Out hinzufügen:

      jQuery ('. menu li'). hover (function () {jQuery (this) .find ('ul') .stop (true, true) .slideDown ('slow');}, function () {jQuery (this.) ) .find ('ul') .stop (true, true) .fadeOut ('slow');});

none

Empfohlen