Heute werden wir alle Arten von Spaß haben. Zuerst erstellen wir ein animiertes Menü mit etwas glänzendem neuen CSS3, während wir lernen, wie man Pseudo-Selektoren praktisch in ein reales Projekt implementiert. Dann werden wir dem nachgehen, wie man dasselbe ohne Pseudo-Selektoren für eine bessere Browser-Unterstützung aufbaut. Zum Schluss wollen wir noch einen Blick darauf werfen, wie man all das ausgefallene CSS zugunsten einer guten altmodischen jQuery ausrangiert.
Machen Sie mit und prüfen Sie gleich drei Möglichkeiten, um ein CSS-Navigationsmenü zu bearbeiten!
Warum Pseudo-Selektoren?
Eine der Hauptaufgaben dieses Artikels besteht darin, ein reales Beispiel für die Verwendung von Pseudoselektoren zu veranschaulichen, das nicht das offensichtliche Tabellen-Tutorial ist.
Pseudo-Selektoren bekommen in Design-Blogs viel Hype, aber wenn es Zeit für Kommentare ist, sehe ich immer die gleiche Frage:? Manchmal werden wir mit lächerlichen und unrealistischen Beispielen beschäftigt, nur um ein neues Spielzeug zu präsentieren. Mittlerweile wird es von den Lesern sofort als "ordentlich" bezeichnet. aber nichts, was jemals praktikabel sein wird.
Unser heutiges Navigationsmenü wird in nur wenigen Pseudo-Selektoren auf sehr schnelle Art und Weise angezeigt. Genau so werden Sie diese Typen in Zukunft verwenden.
Was bauen wir?
Ziel ist es, ein einfaches CSS-Navigationsmenü zu erstellen, das aus rechteckigen Blöcken mit rotem Hintergrund besteht. Wenn sich der Benutzer über dem Menüelement befindet, wird eine gleitende Animation angezeigt, und sowohl die Meldung als auch die Hintergrundfarbe des Menüelements werden geändert.
Es ist fast wie ein Garagentoröffnungseffekt, der über CSS-Animationen angewendet wird. Es ist ein lustiges Projekt und der Endeffekt sieht toll aus.
Erster Schritt: Das HTML
Unsere HTML-Struktur ist sehr kurz, nur ein div, das eine ungeordnete Liste mit drei Listenelementen enthält. Die Listenelemente sehen auf den ersten Blick ein bisschen seltsam aus, jeder hat nicht einen, sondern zwei Links, einen direkt nach dem anderen. Hör zu:
Jedes Listenelement repräsentiert ein Navigationselement. Für jedes Navigationselement gibt es zwei verschiedene Status: Standard und Schwebeflug. Die zwei Verbindungen repräsentieren jeden Zustand. Beachten Sie, wie ich beim Schweben die passiven Nachrichten in einen Aufruf zum Handeln umgewandelt habe:? wird zu "Meet Us", wodurch das Klickverhalten subtil gefördert wird.
Das ist wirklich alles HTML, das wir für diese Runde brauchen. Sie können bereits darüber nachdenken, wie Sie jeden Link im Listenelement anders ausrichten würden. Ohne unsere Pseudo-Selector-Freunde wäre das ziemlich schwierig.
Schritt 2: Starter-Menü CSS
Um das CSS zu starten, müssen wir den Menübereich als Ganzes gestalten. Jeder Menüpunkt ist 100px hoch und 200px breit. Wir haben drei davon. Das ergibt eine Gesamtfläche von 100 x 600 x 600 für das gesamte Menü. Fügen Sie zehn Pixel für jedes der drei Elemente hinzu, und unsere Gesamtsumme wird 100 x 630 Pixel.
Nachdem ich Höhe und Breite eingestellt habe, habe ich einfach das Menü zusammen mit dem Text zentriert und den Überlauf ausgeblendet, was später für die Animation wichtig ist.
Schritt 3: Gestalten Sie die Links
Als Nächstes legen wir die Ästhetik der Menüpunkte fest. Wir zielen zuerst auf die Listenelemente und verschieben sie mit einigen Rändern nach links. Dann verfolgen wir das, indem wir alle Links im Menü gestalten.
Im Wesentlichen haben wir jeden Link in einen großen roten Block verwandelt:
Beachten Sie, dass dieses Styling die zweite Verbindung in jedem Satz effektiv abgeschnitten hat. Was passiert, ist, dass der zweite Link in jedem Listenelement unter dem ersten gestapelt ist und lediglich ausgeblendet wird. Wenn wir vorübergehend ausschalten? Überlauf: versteckt? das wird viel einfacher zu visualisieren.
Schritt 4: Ändern Sie die sekundären Verbindungsstile
Beachten Sie im obigen Bild, dass die oberen und unteren Links im Wesentlichen identisch sind, obwohl sie unterschiedlichen Text haben. Lassen Sie uns dies etwas ändern, um den Übergang deutlicher zu machen. Dazu ändern wir einfach das zweite Feld in jedem Satz in Schwarz und den Text in Weiß.
Der schwierige Teil ist, wie zielen wir nur auf die zweite Verbindung ab? Wir haben nichts in den HTML-Code aufgenommen, um die beiden Elemente voneinander zu unterscheiden: keine Klassen, keine IDs, nichts. An dieser Stelle kommen diese ach so praktischen Pseudo-Selektoren ins Spiel! Mit Pseudo-Selektoren können wir leicht jeden anderen Link durch die Verwendung von ungeraden oder geraden Zielen erreichen.
Dieser Selector sieht etwas kompliziert aus, also lassen Sie ihn durchgehen. Zuerst zielen wir auf die Menü-ID und dann auf die ungeordnete Liste und genauer auf die Ankertags in dieser Liste. Als nächstes fügen wir unseren Pseudo-Selektor?: Nth-of-type (even)? Hinzu, der nur die zweite Verknüpfung in jeder unserer Verknüpfungsgruppen anspricht.
Jetzt können wir einige Stile verwenden, um diese von den roten Blöcken zu unterscheiden:
Wenn wir jetzt noch einmal kurz auskommentieren? Überlauf: versteckt? Wir können sehen, dass unsere Links viel differenzierter sind.
Schritt 5: Hover-Slide-Aktion
Nun ist es an der Zeit, die Aktion festzulegen, die beim Schweben stattfinden wird. Grundsätzlich möchten wir, dass der rote Link nach oben und aus dem Blickfeld rutscht, wenn der schwarze Link in Sicht kommt.
Das hört sich einfach an, aber wenn Sie wirklich darüber nachdenken, wird diese Aktion super knifflig! Wir möchten, dass der oberste Link nach oben rutscht, wenn wir über den Button fahren, aber wenn er aus dem Blickfeld gerät, werden Sie nicht mehr darüber schweben, was zu einer wirklich fehlerhaften Aktion führt.
Nach einigem Nachdenken kam ich zu folgendem Schluss. Wir müssen das gesamte Listenelement für das Hover-Ereignis als Ziel festlegen. Unabhängig davon, ob der obere oder untere Link angezeigt wird, funktioniert alles weiterhin. Trotz der Tatsache, dass das Bewegen des Listenelements das Ereignis auslösen sollte, ist es wirklich etwas anderes, der erste Link, der verschoben werden muss.
Die Umsetzung dieser Ziele in CSS sieht folgendermaßen aus:
Viele Leute wissen es nicht, aber Sie müssen nicht auf das Element reagieren, auf das Sie den Schwebeflugstatus gesetzt haben. Hier lösen wir den Hover auf dem Listenelement aus, verschieben jedoch das erste Kind (danke Pseudo-Auswahl) dieses Elements, das in diesem Fall der oberste Link sein wird.
Um diesen Übergang reibungslos zu gestalten, überarbeiten wir den Code von Schritt 3 und fügen einige nette CSS3-Übergänge hinzu.
Fertig! Pseudo Selector Version
Damit ist unsere erste Version komplett! Unsere Animationen sehen toll aus und die Pseudo-Selektoren tun alles, um unsere Markups schön und sauber zu halten.
Demo: Klicken Sie hier, um zu starten.
Herunterladen: Klicken Sie hier, um alle drei Versionen herunterzuladen.
Verschrottung der Pseudo-Selektoren
Ich persönlich liebe Pseudo-Selektoren, Attribut-Selektoren und alle anderen von CSS3 bereitgestellten Goodies. Der Support ist für sie auf der ganzen Linie ziemlich gut, wobei fast alle großen Browser mitspielen, einschließlich IE9!
Der schlimmste Browser in der Geschichte würde jedoch nicht einfach so gehen und kein Nackenschmerzen sein, so dass natürlich etwas Älteres als IE9 Probleme mit diesen Selektoren haben wird. Da die meisten Leute gerade erst mit dem Abwracken von IE6-Support angefangen haben, sind wir wahrscheinlich noch Jahre davon entfernt, IE6 und IE7 zu ignorieren.
Wenn Sie dieses Menü in einem Live-Projekt implementieren möchten, ist es wahrscheinlich eine bessere Idee, stattdessen Klassen in Ihrem HTML-Code zu verwenden. Mal sehen, wie das funktioniert.
HTML
In Anbetracht unserer Entscheidung, unsere experimentellen Pseudo-Selektoren wegzuwerfen, müssen wir eine zusätzliche Klasse hinzufügen, um den ersten Link zu zielen, ohne den zweiten Link in jedem Listenelement zu beeinflussen. Hier habe ich gerade in ein "Top" geworfen. Klasse auf jedem Link, der oben sitzt.
CSS
Mit diesem zusätzlichen Markup benötigen wir jetzt keine Pseudo-Selektoren in unserem CSS. Wir können stattdessen einfach Klassen verwenden, die universelle Unterstützung haben.
Fertig! Nicht-Pseudo-Selector-Version
Unsere zweite Version ist fertig! Für diejenigen, die sich nicht für Pseudo-Selektoren interessieren, hier eine Version ohne.
Demo: Klicken Sie hier, um zu starten.
Herunterladen: Klicken Sie hier, um alle drei Versionen herunterzuladen.
JQuery für die Animationen verwenden
Als letzte Alternative könnten Sie die CSS-Animationen verwerfen und dieselben Aktionen mit jQuery ausführen (oder jQuery möglicherweise als Fallback über Modernizr verwenden).
Deaktivieren Sie auf der vorherigen Version ohne Pseudo-Selector die CSS-Animationen und werfen Sie diese in jQuery ein:
Wie Sie sehen, wurde der Hover-Effekt für das Listenelement gestartet und der Übergang genauso wie in CSS animiert. Die Ergebnisse sind nahezu identisch und sollten in fast allen Browsern funktionieren, vorausgesetzt, sie haben kein JavaScript deaktiviert.
Meine ursprüngliche Version davon war ein wenig schrullig mit sich wiederholenden Animationen, also ein großer Hut-Tipp für Adrian Pelletier, der ein ähnliches Projekt hat, das mich daran erinnert, die jQuery-Stoppfunktion zu verwenden!
Fertig! jQuery-Version
Unsere finale Version verwendet dieselbe Struktur wie die vorherige, wirft aber die CSS-Übergänge zugunsten von jQuery aus. Schau mal.
Demo: Klicken Sie hier, um zu starten.
Herunterladen: Klicken Sie hier, um alle drei Versionen herunterzuladen.
Fazit
In diesem Tutorial haben Sie nicht nur eine, sondern drei verschiedene Methoden erhalten, um dasselbe fantastische animierte Sliding-Menü zu erreichen. Die erste Version veranschaulicht die Nützlichkeit von Pseudoselektoren in realen Projekten. Der zweite verwischt die Pseudo-Selektoren für diejenigen, die eine weiter kompatible Version suchen. Die letzte Version verwendet jQuery für die Animationen anstelle von CSS3-Übergängen.
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, welche Version Sie heute auf Ihrer Website verwenden würden oder wie Sie diese optimieren würden!