Advertisement
  1. Web Design
  2. Navigation Design

Orman Clarks vertikales Navigationsmenü: Die CSS3-Version

by
Read Time:13 minsLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Orman Clark's Chunky 3D Web Buttons: The CSS3 Version
Quick Tip: Give Orman's Navigation the :target Treatment

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Kommt in der codierten PSD-Serie von Orman Clark und sein fantastisch aussehendes vertikales Navigationsmenü. Wir werden es mit CSS3 und jQuery neu erstellen und dabei die minimal mögliche Anzahl von Bildern verwenden.

Die einzigen Bilder, die wir verwenden, sind für die Symbole. Ich werde ein Sprite mit einem neuen Werkzeug SpriteRight erstellen, es ist jedoch optional. Ich werde auch GradientApp verwenden, um meine CSS3-Verläufe zu erstellen, das ist auch optional.


Schritt 1: Grundlegendes HTML-Markup

Beginnen wir mit einem einfachen Markup, einem leeren HTML5-Dokument:

Und jetzt das Markup für unser Menü; eine ungeordnete Liste in einem enthaltenen Wrapper.

Wir machen die Untermenüs, indem wir eine ungeordnete Liste in jedes unserer vorhandenen Listenelemente einfügen.

Okay, es ist schon genug, aber verwirren Sie es nicht. Zuerst haben wir eine ungeordnete Liste mit fünf Listenelementen erstellt, in denen sich jeweils ein Ankertag befindet. Dann haben wir verschachtelte ungeordnete Listen mit jeweils drei Listenelementen hinzugefügt.

Ich habe außerdem jedem Listenelement eine Klasse hinzugefügt, um das Styling später zu vereinfachen. Schließlich haben wir ein Span-Tag für die Zahlen in jedem Ankertag erstellt. Wenn Sie es in Ihrem Browser anzeigen, sollte es folgendermaßen aussehen:

Basic markup

Schritt 2: Fluid Fonts

Wir müssen sicher sein, dass unser Menü korrekt angezeigt wird. Fügen Sie diese Regeln zu css/styles.css hinzu, setzen Sie den Rand und den Abstand aller unserer ul auf 0 und entfernen Sie den Listenstil.

Bevor wir mit der Gestaltung unseres Menüs beginnen, erstellen wir einen Wrapper mit einer festen Breite und einer Schriftgröße von 13 Pixel (ausgedrückt in em-Einheiten). Zuerst fügen wir dem Text eine Regel hinzu, font-size:100%;. Dadurch wird sichergestellt, dass unser Styling auf der Standardschriftgröße des Browsers basiert (normalerweise 16 Pixel).

Erklären Sie nun, wie die Wrapper-Schriftgröße funktioniert. Wir müssen es als em ausdrücken; proportional zur Größe der Schriftgröße der Eltern. Wir streben 13px an. Unter der Annahme, dass die übergeordnete Größe 16px beträgt, beträgt unser resultierendes em 13 / 16 = 0.8125. 13px ist 0,8125 * 16px.

Wenn Sie unsere Schriftarten (und andere Elemente) in em-Einheiten messen, werden sie flüssig. Wenn wir nun die Wrapper-Schriftgröße (oder die Standardgröße unseres Browsers) ändern, wird das gesamte Menü in Bezug auf diese Basis angepasst. Versuchen Sie, sich nicht verwirren zu lassen. Wenn Sie Hilfe beim Konvertieren Ihrer Schriftarten benötigen, empfehlen wir Ihnen, pxtoem.com zu besuchen.

Wir haben dem Wrapper eine feste Breite von 220px gegeben und ihn mit einem Rand oben zentriert, indem wir den margin: 100px auto; hinzugefügt haben.


Schritt 3: Hauptmenü CSS

Weiter fügen wir ein Styling für das Menü hinzu. Wir machen die Breite und Höhe des Menüs ul auto und wenden dann einen Schatten auf das Ganze an. Durch Hinzufügen der Höhe als automatisch wird der Schatten angepasst, wenn der Schieberegler geöffnet wird.

Dann die Ankertags; Wir fügen eine Breite von 100% hinzu, was bedeutet, dass sie sich auf die 220px Breite des Wrappers erstrecken. Für eine Höhe verwenden wir ems. Denken Sie also an unsere Hauptschriftgröße von 13px zurück. Unsere .psd zeigt eine Höhe von 36px, das ist also unser Ziel. Wir nehmen 36 und teilen es durch 13, was ungefähr 2,75 em ergibt (36 / 13 = 2.76923077). Wir werden auch 2.75em für die Zeilenhöhe verwenden (um den gesamten Text vertikal zu zentrieren) und dann einen Texteinzug anwenden, um Text hineinzuschieben, um später Platz für unser Symbol zu schaffen.

Wir werden einen CSS3-Farbverlauf für den Hintergrund hinzufügen. Ich habe diesen mit GradientApp erstellt. Dann ändern wir die Schriftart, wählen Sie die Helvetica Neue-Schriftart und eine weiße Farbe zusammen mit einem Textschatten. Beachten Sie, dass wir hier keine Schriftgröße verwendet haben. Das liegt daran, dass unsere Basisschrift 13px für den Wrapper ist, den unsere Anker geerbt haben, sodass Sie ihn nicht hinzufügen müssen.

Alles ist in Ordnung! Jetzt sieht es besser aus und wir haben die Struktur! Aber wie wäre es, wenn wir eine Hintergrundfarbe hinzufügen würden, damit das Menü besser zur Geltung kommt.

Step 2

Tipp: EMs merken

Aus dem obigen CSS können Sie ersehen, dass Sie leicht vergessen können, was Ihre em-Einheiten tatsächlich bedeuten. Es ist eine gute Idee, Kommentare zu Ihren ursprünglichen Berechnungen zu hinterlassen, damit Sie, wenn Sie in Zukunft zu Ihrem Code zurückkehren, immer noch entschlüsseln können, was los ist. Denken Sie an die Formel: gewünschtes px / übergeordnetes px = resultierendes em und verwenden Sie das ungefähre Symbol (≈), wenn Sie das Ergebnis runden.


Schritt 4: Untermenü CSS

Jetzt sollen wir etwas CSS für die weißen Untermenüs hinzuzufügen. Wir müssen einen weißen Hintergrund mit einigen grauen Rändern hinzufügen. Beachten Sie, dass der letzte Rand keinen unteren Rand hat. Wir werden ihn daher mit dem Pseudo-Selektor :last-child ausrichten, um ihn zu entfernen. Es hat einen dunkelblauen Rand, also entfernen wir den grauen und fügen einen blauen hinzu.

Der nächste Schritt ähnelt dem vorherigen. Wir werden die Höhen und Breiten erneut hinzufügen und den Hintergrund in Weiß ändern. Dieses Mal müssen wir die Schriftgröße ändern. Wir streben 12px an, also erhalten wir mit unserer Berechnung des gewünschten px / übergeordneten px = resultierenden em 0,923em

Ändern wir auch die Textfarbe in Grau. Beachten Sie, dass wir display: block verwendet haben. Wenn wir float verwendet float:left; würden die Menüs nicht reibungslos animiert, daher verwenden wir den Anzeigeblock, um ihnen zu helfen, sich schön und reibungslos zu bewegen. Sie werden auch feststellen, dass wir einen zusätzlichen Stil hinzugefügt haben. Wir wenden dies auf das letzte Kind der Sub-Ul an. Wir müssen das machen, damit wir die Rahmenfarbe ändern können.

Es sieht jetzt richtig gut aus!

Step 3Step 3Step 3

Schritt 5: Hover und Active Styling

Wir werden jetzt einige Hover- und Active Stile hinzufügen, besonders wenn das Akkordeon geöffnet ist! Wir werden dem aktiven Menü auch einen Rand unten hinzufügen. Wenn Sie jetzt denken: "Warum haben wir keine aktive Klasse hinzugefügt?". Nun mein Freund, das wird die jQuery später tun.


Schritt 6: Hauptmenüsymbole

Wir werden die Symbole mit dem :before Pseudo hinzufügen. Zuerst zielen wir auf alle Sub-Ul-Ankertags ab, wenden das Hintergrund-Sprite an und setzen es auf keine Wiederholung. Wir geben ihm eine Schriftgröße von 36px, obwohl kein Text vorhanden ist. Wir werden 36px verwenden, damit wir eine Breite und Höhe von 1em verwenden können, die jetzt 36px entspricht. Wir werden dann das Element um 50% nach unten drücken und .5em vom Rand oben entfernen, um es zu zentrieren.

Unter Verwendung der Klassen für jedes untergeordnete Listenelement werden wir sie als Ziel festlegen und ihnen jeweils die entsprechende Hintergrundposition für das Sprite zuweisen.

Hinweis: Ich habe dieses Sprite mit der neuen App SpriteRight erstellt. Wenn Sie mit dem Sprite herumspielen möchten, habe ich die Bilder und Projektdateien in die Quelldateien aufgenommen.

Step 5Step 5Step 5

Schritt 7: Hauptmenü-Nummern

Okay, erinnern Sie sich an die Spannweiten, die wir hinzugefügt haben? Diese werden die Zahlen erstellen!

Zuerst fügen wir eine Schriftgröße von 11px hinzu (die in ungefähr 0,857em konvertiert wird). Wir werden sie absolut positionieren und sie noch einmal von rechts nach rechts schieben, um diese Flüssigkeit herzustellen. Wir werden es 50% von oben nach unten drücken und den Rand oben entfernen, um es zu zentrieren. Ein Hintergrund wird zusammen mit einigen Box-Schatten hinzugefügt, ein Einschub und ein Anfang.

Noch einmal, um es flüssig zu machen, werden wir Polster verwenden, um die Breite und Höhe zu erstellen. Wir haben sogar ems für den Randradius verwendet. Wir brauchen das, denn wenn der Text größer wird, erscheinen sie unverhältnismäßig. Ich habe auch einen anderen Stil hinzugefügt, wenn der Mauszeiger schwebt oder eine aktive Klasse auf den Link angewendet wird.

Step 6Step 6Step 6

Schritt 8: Untermenü-Nummern und Pfeil

Dieser Vorgang ähnelt dem vorherigen Schritt, daher werde ich nicht auf Details eingehen. Die Hauptunterschiede hier sind, dass ich die Hintergrundfarbe entfernt, den Rand geändert und die Schriftfarbe geändert habe. Wir müssen auch diesen Pfeil hinzufügen und werden uns noch einmal auf das :before dem Pseudo stützen. Wir definieren eine Breite und Höhe und fügen mit ems eine linke Position hinzu, um sicherzustellen, dass es flüssig ist.

Zuletzt ein Schwebezustand (danke an diejenigen in den Kommentaren, die auf seine anfängliche Abwesenheit hingewiesen haben). Wir wenden einfach eine dunklere Farbe (#32373D) auf den Ankertext, den Pseudopfeil und die Zahl innerhalb des Bereichs an.

Also sieht es jetzt ziemlich cool aus, oder? Ich denke, es ist Zeit, dass wir dem einige Funktionen hinzufügen!

Step 7Step 7Step 7

Schritt 9: jQuery Time

Wetten, dass Sie darauf gewartet haben, hierher zu kommen?! Nun sind wir endlich am jQuery-Punkt. Wir müssen zuerst einen Link zur jQuery-Bibliothek erstellen, indem wir eine von Google gehostete verwenden. Die aktuellste Version ist 1.7.1. Fügen Sie dem Kopfbereich Ihrer HTML-Seite Folgendes hinzu:

Fügen Sie nun am Ende Ihres HTML-Dokuments Folgendes hinzu, bevor Sie das </body> -Tag schließen. Machen Sie Ihnen keine Sorgen, wenn das zu verwirrend aussieht, ich werde es gleich erklären.

Zuerst speichern wir das Untermenü und die Anker-Tags des Hauptmenüs in zwei verschiedenen Variablen. Das ist einfach, später darauf zu verweisen.

Dadurch werden alle Untermenüs ausgeblendet, wenn die Seite geladen wird

Zuerst werden wir ihm sagen, dass er etwas tun soll, wenn wir auf eines der Ankertags des Hauptmenüs klicken.

Hier verhindern wir, dass die Ankertags Links folgen oder die Adresse in der Adressleiste ändern. z.B. Wenn Sie jemals ein Ankertag mit dem Link '#' erstellen und es anklicken, wird es jetzt nicht in der Adressleiste angezeigt. Die Ankertags sind grundsätzlich deaktiviert.

Jetzt weisen wir Sie an, dass WENN das menu_a die Klasse 'active' hat, entfernen Sie sie.

Hier verwenden wir '.filter' und ':visible'. Wenn ein Menü geöffnet ist, schieben Sie es mit normaler Geschwindigkeit nach oben.

Wenn das Menü geschlossen ist, fügen Sie die Klasse 'active' hinzu (damit wir auf den schönen CSS-Stil zugreifen können) und schieben Sie sie mit normaler Geschwindigkeit nach unten.

Jetzt müssen wir eine ELSE als Teil unserer bedingten Anweisung verwenden. Entfernen Sie also ELSE die aktive Klasse und schieben Sie das Menü nach oben, um es auszublenden. Dies ist nur so, dass wir jedes Menü codieren können, ohne die Seite neu laden zu müssen.

Hinweis: Wenn Sie die Geschwindigkeit des Schiebers ändern möchten, ändern Sie den Normalwert auf z. '500'. Das wird es bei 500 Millisekunden schieben.

Wenn Sie jQuery von Grund auf lernen möchten, sollten Sie sich den kostenlosen Kurs "Lernen Sie jQuery in 30 Tagen" von tutsplus.com ansehen.


Abschluss

Nun, wir haben es geschafft! Wir haben Ormans wunderschönes vertikales Navigationsmenü mit CSS3 und jQuery codiert! Hier finden Sie einen kurzen Tipp, wie Sie dies nur mit CSS3 mit dem Pseudo-Selektor :target erstellen können.

FinalFinalFinal
Final largeFinal largeFinal large
#wrapper {width: 440px; font-size: 1em}

Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.