Schneller Tipp Geben Sie der Orman-Navigation die Zielbehandlung

Wir haben kürzlich ein großartiges Tutorial veröffentlicht, das das vertikale Navigationsmenü von Orman Clark in ein flexibles, jQuery-betriebenes Akkordeon umwandelte. Es ist tatsächlich möglich, das Ganze zum Laufen zu bringen, ohne sich auf jQuery zu stützen, und es ist die perfekte Gelegenheit, mit dem CSS: target selector zu spielen.

Also… wie?

Wir werden jQuery vergessen und stattdessen CSS verwenden :Ziel Pseudo-Selector, um unser Akkordeon-Menü erweitern und zusammenziehen.

Zur Erinnerung, hier ist die originale jQuery-Demo, dann der reine CSS-Ansatz.

Das `:Ziel` Pseudo Selector

Sie werden zweifellos mit URLs vertraut sein, die folgendermaßen aussehen: http://www.w3.org/TR/selectors/#target-pseudo. Es endet mit einem # -Zeichen und einer Element-ID, mit der der Browser direkt zu diesem Element geleitet wird. Diese bestimmte URL ist das perfekte Beispiel - Sie gelangen zur Überschrift mit der ID von # Target-Pseudo (zögern Sie nicht und lesen Sie nach).

Wenn diese ID an das Ende einer URL genäht wird, wird sie als Fragment-ID bezeichnet. Es wird nicht nur verwendet, um den Browser an einen Ort auf der Seite zu bringen, sondern kann auch über CSS verwendet werden, um das betreffende Element zu identifizieren.

Zusamenfassend; wir gebrauchen :Ziel um das Element in der Fragmentkennung auszuwählen und zu bearbeiten.

Schritt 1: Sollen wir anfangen?

Beginnen wir mit dem Herunterladen der ursprünglichen Quelldateien aus dem ersten Tutorial. Das Styling ist für uns bereits gemacht, so dass es wenig Sinn macht, das Rad neu zu erfinden.

Öffnen Sie zunächst index.html. In Zeile 10 sehen Sie, dass auf jQuery verwiesen wird. Wir werden das nicht brauchen, also entfernen Sie es.

     Vertikales Navigationsmenü: CSS3-Code

Am Fuß des Dokuments finden Sie die Funktion, mit der das jQuery-Akkordeon zum Laufen gebracht wird. Auch das alles loswerden.

Ausgezeichnet. Wir haben jetzt eine viel sauberere Basis.

Schritt 2: Kann ich eine Identifizierung sehen??

Wie oben erwähnt, ist die :Ziel Der Selektor zeigt auf jedes Element, auf das in der Fragmentkennung verwiesen wird. Wir müssen daher sicherstellen, dass unsere primären Listenelemente alle eindeutige IDs haben und die Anker in ihnen entsprechende Links haben:

 Freunde 340  Süße Kätzchen 14
 Seltsames "Zeug" 6
 Automatische Fehler 2

Wenn Sie nun auf die Links klicken, wird in der URL ein Fragmentbezeichner angezeigt:

Schritt 3: Zusammenbruch

Nach dem Entfernen aller jQuery-Bits und -Bobs wird das Akkordeon derzeit vollständig erweitert. Wir müssen den ursprünglichen Zustand reduzieren, damit wir jeden Unterabschnitt anzeigen können, wenn auf die Links geklickt wird.

Gehen Sie zu der vorhandenen CSS-Datei und fügen Sie unten einige Regeln hinzu:

 / * zusätzliche Stile * / .menu> li> ul height: 0; Überlauf versteckt;

Wir zeigen hier auf unsere Untermenüs. jeder direkte Nachkomme der .menu-Listenelemente. Wir sagen, dass ihre anfängliche Höhe 0 ist und dass jeglicher Überlauf verborgen ist, um zu verhindern, dass Inhalt in Sichtweite gerät. Wir haben das Ganze jetzt zusammengebrochen. Und so wird es auch bleiben, wenn wir nichts dagegen unternehmen…

Schritt 4: Und erweitern

Wir möchten, dass jedes Untermenü erweitert wird, jedoch nur, wenn wir auf den übergeordneten Link geklickt haben. Lass uns benutzen :Ziel um sie auszuwählen:

 .menu> li: target> ul height: auto;

Vereinfacht gesagt heißt das: "Sehen Sie das li, das in der URL erwähnt wird? Nun, ändern Sie die Höhe der ul in auto". Wenn Sie auf eine andere Stelle klicken und die ID nicht mehr in der URL angezeigt wird, wird das Untermenü wieder ausgeblendet. Versuch es!

Schritt 5: Verzierungen

Optisch gibt es noch ein paar Dinge zu tun. Der aktive Status wird von jQuery nicht mehr zugewiesen. Daher müssen wir sicherstellen, dass unsere: Ziellistenelemente blau sind. Diese gibt es nicht mehr:

 .Menü> li> a.aktiv

 .menu> li a.active span

Tauschen Sie sie für diese ein:

 .Menü> li: Ziel> a

 .menu> li: target> a span

Wir werden auch einen Rand am unteren Rand unserer erweiterten Untermenüs hinzufügen:

 .menu> li: target> ul height: auto; Rand unten: 1px fest # 51555a;

OK, Orman wird damit zufrieden sein :) Schauen Sie sich an, was wir bisher haben.

Schritt 6: Übergänge

Ich kenne. Sie schreien auf dem Bildschirm "Was ist mit den fließenden Übergängen ?!" Ich fürchte, du wirst enttäuscht sein. Wenn wir nicht eine bestimmte Höhe für die Untermenüs festlegen, können wir keine CSS-Übergänge verwenden, um unser Akkordeon problemlos zu erweitern und zu reduzieren. Übergänge spielen nicht gut mit Höhe: Auto. Natürlich Du könnte eine bestimmte Höhe angeben:

 .menu> li: target> ul height: 7.9em; Rand unten: 1px fest # 51555a;

und dann Übergänge anwenden:

 .menu> li> ul height: 0; Überlauf versteckt; -webkit-Übergang: Höhe 0,3 s Leichtgängigkeit; -Moz-Übergang: Höhe 0,3 s Leichtes Einfahren; -o-Übergang: Höhe 0,3 s Leichtgängigkeit; -ms-Übergang: Höhe 0,3 s Leichtgängigkeit; Übergang: Höhe 0,3s Einstiegskomfort;

… Aber Ihr Menü ist nicht mehr zu 100% flexibel. Sie sind auf eine bestimmte Anzahl (3) von Untermenüelementen beschränkt. Schauen Sie sich die Demo an.

Was wir könnte Um die Dinge zu glätten, fügen Sie einen Übergang zu einer anderen Eigenschaft hinzu. Wir können den Höhenübergang nicht haben, also machen wir einen Deckkraftübergang aus:

 .menu> li> ul height: 0; Überlauf versteckt; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); / * IE6-IE8 * / -webkit-Übergang: Opazität 0,9s Leichtgängigkeit; -Moz-Übergang: Opazität 0,9s Einstieg -o-Übergang: Deckkraft 0,9 s Leichtgängigkeit; -ms-Übergang: Deckkraft 0,9 s Leichtgängigkeit; Übergang: Opazität 0,9s Einstieg  .menu> li: target> ul height: auto; Rand unten: 1px fest # 51555a; Deckkraft: 1; Filter: Alpha (Deckkraft = 100); / * IE6-IE8 * /

Was wir getan haben, ist die voreingestellte Deckkraft des Untermenüs auf 0 zu setzen. Es hat nicht nur eine Höhe von 0, es ist jetzt auch transparent. Dann setzen wir auch die Übergänge auf den Standardzustand. Im Hover-Status wird es immer noch weit geöffnet, aber der Inhalt wird eingeblendet. Ein bisschen besser fürs Auge.

Schritt 7: Alte Browser

Ein anderes Thema ist die Tatsache, dass :Ziel wird von älteren Browsern (Internet Explorer 8 und darunter) nicht erkannt, daher ist unser reduziertes Menü in diesen Browsern unbrauchbar. Wenden wir ein paar alternative Methoden an, die die Navigation zumindest zugänglich machen.

Zuerst fügen wir (nach unserer ursprünglichen CSS-Anforderung) einen bedingten Kommentar hinzu, um eine sekundäre CSS-Datei aufzurufen, wenn der Browser Internet Explorer 8 oder älter ist:

In dieser Datei wiederholen wir einfach die Regeln, an denen wir gerade gearbeitet haben, verwenden sie aber nicht :Ziel, wir gebrauchen :schweben.

 .menu> li: hover> ul height: 7.9em; Rand unten: 1px fest # 51555a;

Schauen Sie sich die Demo erneut an. Nicht genau das, wonach wir gesucht haben, aber es ist zumindest eine abwärtskompatible, zugängliche Navigation.

Fazit

Wenn Sie die Wahl haben, entscheiden Sie sich wahrscheinlich immer noch für den jQuery-Ansatz. Es wird in allen Browsern gleichermaßen akzeptiert (sofern JavaScript aktiviert ist) und der Effekt ist glatter. Trotzdem, wenn Sie sich nicht bewusst waren :Ziel Mit diesem Auswahlhilfe haben Sie hoffentlich einen Einblick in mehr CSS-Potenzial erhalten.

Web-Design