Share
Als nächstes in der kodierten PSD-Serie von Orman Clark erscheint sein fantastisch aussehendes Vertical Navigation Menu. Wir werden es mit CSS3 und jQuery neu erstellen und dabei möglichst wenig Bilder verwenden.
Die einzigen Bilder, die wir verwenden, sind für die Symbole. Ich werde ein Sprite mit einem neuen Werkzeug namens SpriteRight erstellen. Dies ist jedoch optional. Zusätzlich werde ich GradientApp verwenden, um meine CSS3-Farbverläufe zu erstellen. Dies ist jedoch optional.
Beginnen wir mit einem einfachen Markup, einem leeren HTML5-Dokument:
Vertikales Navigationsmenü: CSS3-Code
Und jetzt das Markup für unser Menü; eine ungeordnete Liste in einem enthaltenden Wrapper.
- Freunde 340
- Videos 147
- Galerien 340
- Podcasts 222
- Roboter 16
Zuletzt erstellen wir die Untermenüs, indem wir eine ungeordnete Liste in jedes unserer vorhandenen Listenelemente einfügen.
- Freunde 340
- Süße Kätzchen 14
- Seltsames "Zeug" 6
- Automatische Fehler 2
- Videos 147
- Süße Kätzchen 14
- Seltsames "Zeug" 6
- Automatische Fehler 2
- Galerien 340
- Süße Kätzchen 14
- Seltsames "Zeug" 6
- Automatische Fehler 2
- Podcasts 222
- Süße Kätzchen 14
- Seltsames "Zeug" 6
- Automatische Fehler 2
- Roboter 16
- Süße Kätzchen 14
- Seltsames "Zeug" 6
- Automatische Fehler 2
Okay, dort scheint viel zu sein, aber lassen Sie sich nicht verwirren. Zuerst haben wir eine ungeordnete Liste mit fünf Listenelementen erstellt, die jeweils ein Ankertag enthalten. Dann haben wir verschachtelte ungeordnete Listen mit jeweils drei Listenelementen hinzugefügt.
Ich habe auch jedem Listenelement eine Klasse hinzugefügt, damit das Styling später einfacher wird. Schließlich haben wir für die Zahlen in jedem Ankertag ein Span-Tag erstellt. Wenn Sie es in Ihrem Browser anzeigen, sollte es so aussehen:
Wir werden zuerst sicherstellen, dass unser Menü korrekt angezeigt wird. Fügen Sie diese Regeln hinzu css / styles.css, Sie werden die Marge und Polsterung aller unserer festlegen uls bis 0, und entfernen Sie den Listenstil.
ul, ul ul Marge: 0; Polsterung: 0; Listenstil: keine;
Bevor wir unser Menü gestalten, erstellen wir einen Wrapper mit fester Breite und einer Schriftgröße von 13px (ausgedrückt in Einheiten). Zuerst fügen wir dem Körper eine Regel hinzu, Schriftgröße: 100%;. Dadurch wird sichergestellt, dass unser Stil auf der Standardschriftgröße des Browsers (normalerweise 16 Pixel) basiert..
Nun wird erläutert, wie die Schriftgröße des Wrappers funktioniert. Wir müssen es als ausdrücken em; proportional zur Größe der Schriftgröße des übergeordneten Elements. Wir streben nach 13px, also unter der Annahme, dass die übergeordnete Größe 16px ist, ist dies das resultierende em 13/16 = 0,8125. 13px ist 0,8125 * 16px.
Wenn Sie unsere Schriftarten (und andere Elemente) in Einheiten messen, werden sie flüssig. Wenn wir nun die Schriftgröße des Wrappers (oder die Standardgröße unseres Browsers) ändern, wird das gesamte Menü in Bezug auf diese Basis angepasst. Lassen Sie sich davon nicht verwirren. Wenn Sie Hilfe beim Konvertieren Ihrer Schriftarten benötigen, sollten Sie pxtoem.com besuchen.
Körper Schriftgröße: 100%; eine Textdekoration: keine; ul, ul ul margin: 0; Polsterung: 0; Listenstil: keine; #wrapper width: 220px; Marge: 100px auto; Schriftgröße: 0.8125em;
Wir haben dem Wrapper eine feste Breite von 220px gegeben und ihn durch Hinzufügen mit etwas Rand oben zentriert Marge: 100px auto;.
Als nächstes werden wir ein bisschen Styling für das Menü hinzufügen. Wir machen die Breite und Höhe des Menüs ul Auto, Wenden Sie dann einen Schatten auf das Ganze an. Durch Hinzufügen der Höhe als Auto wird der Schatten angepasst, wenn der Schieberegler geöffnet wird.
Dann die Anker-Tags; Wir addieren eine Breite von 100%, was bedeutet, dass sie sich auf die Breite des Wrappers von 220 Pixel erstrecken. Für eine Höhe verwenden wir ems, denken Sie also an unsere Hauptschriftgröße von 13px. Unser .psd zeigt eine Höhe von 36px, das ist also unser Ziel. Wir nehmen 36 und teilen es durch 13, was ungefähr 2.75em beträgt (36/13 = 2,76923077). Wir werden auch 2.75em für die Zeilenhöhe verwenden (um den gesamten Text vertikal zu zentrieren) und dann etwas Texteinzug anwenden, um Text hineinzuschieben, sodass später Platz für unser Symbol bleibt.
Wir werden einen CSS3-Farbverlauf für den Hintergrund hinzufügen. Ich habe diesen Schritt mit GradientApp erstellt. Als Nächstes ändern wir die Schriftart. Wir wenden die Helvetica Neue Schriftart und eine weiße Farbe zusammen mit einem Textschatten an. Beachten Sie, dass wir hier keine Schriftgröße verwendet haben. Das liegt daran, dass unsere Basisschriftart 13px für den Wrapper ist, den unsere Anker vererbt haben, sodass Sie sie nicht hinzufügen müssen.
Körper Schriftgröße: 100%; eine Textdekoration: keine; ul, ul ul margin: 0; Polsterung: 0; Listenstil: keine; #wrapper width: 220px; Marge: 100px auto; Schriftgröße: 0.8125em; .menu width: auto; Höhe: Auto; -webkit-box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13); Box-Schatten: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13); .menu> li> a Hintergrundfarbe: # 616975; Hintergrundbild: -webkit-Gradient (linear, links oben, links unten, von (rgb (114, 122, 134)) bis (rgb (80, 88, 100))); Hintergrundbild: -webkit-linearer Gradient (oben, rgb (114, 122, 134), rgb (80, 88, 100)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (114, 122, 134), rgb (80, 88, 100)); Hintergrundbild: -o-linearer Gradient (oben, rgb (114, 122, 134), rgb (80, 88, 100)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (114, 122, 134), rgb (80, 88, 100)); Hintergrundbild: linearer Gradient (oben, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); Rahmen unten: 1px fest # 33373d; -webkit-box-shadow: Einfügung von 0px 1px 0px 0px # 878e98; -moz-box-shadow: Einfügung von 0px 1px 0px 0px # 878e98; Box-Schatten: Einfügung 0px 1px 0px 0px # 878e98; Breite: 100%; Höhe: 2,75 em; Zeilenhöhe: 2,75em; Gedankenstrich: 2.75em; Bildschirmsperre; Position: relativ; Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgewicht: 600; Farbe: #fff; Text-Schatten: 0px 1px 0px rgba (0,0,0, .5);
Okay! Jetzt sieht es besser aus und wir bekommen auch etwas Struktur! Aber wie wäre es mit einer Hintergrundfarbe, damit das Menü besser hervorsticht…
Körper Hintergrund: # 32373d;
Aus dem obigen CSS können Sie erkennen, dass es leicht ist zu vergessen, was Ihre Einheiten tatsächlich bedeuten. Es ist eine gute Idee, Kommentare zu den ursprünglichen Berechnungen zu hinterlassen, damit Sie, wenn Sie in der Zukunft auf Ihren Code zurückkommen, immer noch erkennen können, was los ist. Erinnere dich an die Formel: gewünschtes px / parent px = resultierendes em und verwenden Sie das angenäherte Symbol (≈), wenn Sie das Ergebnis runden.
#wrapper font-size: 0.8125em; / * 13/16 = 0,8125 * / .menu> li> a height: 2,75 em; / * 36/13 ≈ 2,75 * / Zeilenhöhe: 2,75 em; / * 36/13 ≈ 2.75 * / Texteinzug: 2.75em; / * 36/13 ≈ 2,75 * /
Zeit, um CSS für die weißen Untermenüs hinzuzufügen. Wir müssen einen weißen Hintergrund mit grauen Rändern hinzufügen. Beachten Sie, dass der letzte nicht über einen unteren Rand verfügt. Wir werden ihn mit dem Ziel anvisieren :letztes Kind Pseudo-Selektor, um es zu entfernen. Es hat einen dunkelblauen Rand, also entfernen wir den grauen Rand und fügen einen blauen hinzu.
Der nächste Schritt wird ähnlich dem vorherigen sein. Wir werden die Höhen und Breiten erneut hinzufügen, den Hintergrund in Weiß ändern. Diesmal müssen wir die Schriftgröße ändern. Wir streben nach 12px, also verwenden wir unsere Berechnung von gewünschtes px / parent px = resultierendes em wir bekommen 0.923em
Lassen Sie uns auch die Textfarbe in ein Grau ändern. Notiz, die wir verwendet haben Bildschirmsperre. Wenn wir gebraucht hätten Schwimmer: links Da die Menüs nicht reibungslos animiert werden können, verwenden wir einen Anzeigeblock, damit sie sich schön und reibungslos 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 dies tun, damit wir die Rahmenfarbe ändern können.
.menü ul li a background: #fff; Rahmen unten: 1px fest # efeff0; Breite: 100%; Höhe: 2,75 em; Zeilenhöhe: 2,75em; Gedankenstrich: 2.75em; Bildschirmsperre; Position: relativ; Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 0,923 em; Schriftgewicht: 400; Farbe: # 878d95; .menu ul li: letztes Kind a border-bottom: 1px solid # 33373d;
Es fängt an, jetzt wirklich gut auszusehen!
Wir werden jetzt einige Hover- und aktive Styles hinzufügen, besonders wenn das Akkordeon geöffnet ist! Wir fügen dem aktiven Menü außerdem einen unteren Rand hinzu. Nun, wenn Sie denken: "Warum haben wir keine aktive Klasse hinzugefügt?". Nun, mein Freund, das wird die jQuery später machen.
.menu> li> a: hover, .menu> li> a.active Hintergrundfarbe: # 35afe3; Hintergrundbild: -webkit-Gradient (linear, links oben, links unten, von (rgb (69, 199, 235)) bis (rgb (38, 152, 219))); Hintergrundbild: -webkit-linearer Gradient (oben, rgb (69, 199, 235), rgb (38, 152, 219)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (69, 199, 235), rgb (38, 152, 219)); Hintergrundbild: -o-linearer Gradient (oben, rgb (69, 199, 235), rgb (38, 152, 219)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (69, 199, 235), rgb (38, 152, 219)); Hintergrundbild: linearer Gradient (oben, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); Rand unten: 1px fest # 103c56; -webkit-box-shadow: Einfügung von 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: Einfügen von 0px 1px 0px 0px # 6ad2ef; Box-Schatten: Einfügen 0px 1px 0px 0px # 6ad2ef; .menu> li> a.active border-bottom: 1px fest # 1a638f;
Wir fügen die Icons mit dem hinzu :Vor Pseudo. Zuerst richten wir alle Ankertags für untergeordnete Ul an, wenden das Hintergrund-Sprite an und setzen es auf no repeat. Wir geben ihm eine Schriftgröße von 36px, obwohl kein Text vorhanden ist. Wir verwenden 36px, sodass wir eine Breite und Höhe von 1em verwenden können, die jetzt 36px entspricht. Wir drücken dann das Element um 50% nach unten und entfernen .5em vom oberen Rand, um es zu zentrieren.
Unter Verwendung der Klassen für jedes untergeordnete Listenelement werden wir sie anvisieren und ihnen jeweils die geeignete 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.
.menu> li> a: before content: "; Hintergrundbild: URL (… /images/sprite.png); Hintergrundwiederholung: Keine Wiederholung; Schriftgröße: 36px; Höhe: 1em; Breite: 1em; Position : absolut; links: 0; oben: 50%; Marge: -.5em 0 0 0; .item1> a: vor Hintergrundposition: 0 0; .item2> a: vor Hintergrundposition: -38px 0; .item3> a: vor Hintergrundposition: 0 -38px; .item4> a: vor Hintergrundposition: -38px -38px; .item5> a: vor Hintergrundposition: -76px 0
Okay, erinnerst du dich an die Spannen, 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). Wir werden sie absolut positionieren und sie wieder von rechts nach rechts drücken, um diese Flüssigkeit herzustellen. Wir werden es um 50% von oben nach unten drücken und den oberen Rand entfernen, um ihn zu zentrieren. Ein Hintergrund wird zusammen mit einigen Schattenfeldern, einem Einfügungs- und Beginn-Schatten hinzugefügt.
Um es noch einmal flüssig zu machen, verwenden wir Polsterung, um Breite und Höhe zu erzeugen. Wir haben sogar Ems im Grenzradius 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 Hovering oder eine aktive Klasse auf den Link angewendet wird.
.menu> li> a span font-size: 0.857em; Anzeige: Inline-Block; Position: absolut; rechts: 1em; Spitze: 50%; Hintergrund: # 48515c; Zeilenhöhe: 1em; Höhe: 1em; Polsterung: .4em .6em; Marge: -8em 0 0 0; Farbe: #fff; Text-Gedankenstrich: 0; Text ausrichten: Mitte; -webkit-border-radius: .769em; -moz-border-radius: .769em; Grenzradius: .769em; -webkit-box-shadow: Einfügung 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: Einfügen von 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); Box-Schatten: Einfügung von 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); Text-Schatten: 0px 1px 0px rgba (0,0,0, .5); Schriftgewicht: 500; .menu> li> a: Schwebeflugspanne, .menu> li a.aktive Spanne Hintergrund: # 2173a1;
Dieser Prozess wird dem vorherigen Schritt ähnlich sein, so dass ich nicht viel ins Detail gehe. Die Hauptunterschiede hier sind, dass ich die Hintergrundfarbe entfernt, die Umrandung und die Schriftfarbe geändert habe. Wir müssen auch diesen Pfeil hinzufügen und lehnen uns wieder an :Vor Psuedo. Wir definieren eine Breite und Höhe und fügen mit Hilfe von ems einige linke Positionen hinzu, um sicherzustellen, dass sie flüssig sind.
Zum Schluss noch ein Schwebeflugstaat (dank der Kommentare in den Kommentaren, die auf seine ursprüngliche Abwesenheit hingewiesen haben). Wir wenden einfach eine dunklere Farbe (# 32373D) auf den Ankertext, den Pseudo-Pfeil und die Zahl innerhalb des Bereichs an.
.Menü ul> li> a span font-size: 0.857em; Anzeige: Inline-Block; Position: absolut; rechts: 1em; Spitze: 50%; / background: #fff; Rahmen: 1px fest # d0d0d3; Zeilenhöhe: 1em; Höhe: 1em; Polsterung: .4em .7em; Marge: -.9em 0 0 0; Farbe: # 878d95; Text-Gedankenstrich: 0; Text ausrichten: Mitte; -webkit-border-radius: .769em; -moz-border-radius: 769em; Grenzradius: 769em; Textschatten: 0px 0px 0px rgba (255,255,255, 0,01)); .menu> li> ul li a: vor content: '▶'; Schriftgröße: 8px; Farbe: #bcbcbf; Position: absolut; Breite: 1em; Höhe: 1em; oben: 0; links: -2.7em; .menu> li> ul li: schweben Sie a, .menu> li> ul li: schweben Sie eine Spanne, .menu> li> ul li: schweben Sie a: vor color: # 32373D;
Also sieht es jetzt ziemlich cool aus, oder? Ich denke, es ist an der Zeit, dass wir einige Funktionen hinzufügen!
Ich wette, Sie haben darauf gewartet, hierher zu kommen ?! Nun sind wir endlich am jQuery-Punkt. Wir müssen zuerst eine Verbindung zur jQuery-Bibliothek herstellen, die von Google gehostet wird. Die aktuellste Version ist 1.7.1. Fügen Sie dem head-Abschnitt Ihrer HTML-Seite Folgendes hinzu:
Fügen Sie vor dem Schließen am Ende des HTML-Dokuments Folgendes hinzu
Accentsconagua
var menu_ul = $ ('. menu> li> ul'), menu_a = $ ('. menu> li> a'); Zuerst speichern wir das Untermenü und die Hauptmenü-Ankertags in zwei verschiedenen Variablen. Dies macht es einfach, sie später zu referenzieren.
menu_ul.hide ();
Dadurch werden alle Untermenüs beim Laden der Seite ausgeblendet
menu_a.click (Funktion (e)
Zuerst sagen wir ihm etwas zu tun, wenn wir auf einen der Anker-Tags des Hauptmenüs klicken.
e.preventDefault ();
Hier verhindern wir, dass die Ankertags Links folgen oder die Adresse in der Adressleiste ändern. z.B. Wenn Sie jemals ein Ankertag mit einem Link von '#' erstellen, wird dieses Element beim Klicken jetzt nicht in der Adressleiste angezeigt. Die Ankertags sind grundsätzlich deaktiviert.
if (! $ (this) .hasClass ('active')) menu_a.removeClass ('active'); Jetzt weisen wir Sie an, dass wenn menu_a die Klasse "aktiv" hat, entfernen Sie es.
menu_ul.filter (': visible'). slideUp ('normal'); Hier verwenden wir '.filter' und ': visible'. Wenn ein Menü geöffnet ist, schieben Sie es mit einer normalen Geschwindigkeit nach oben.
$ (this) .addClass ('active'). next (). stop (true, true) .slideDown ('normal'); 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 einer normalen Geschwindigkeit nach unten.
else $ (this) .removeClass ('active'); $ (this) .next (). stop (true, true) .slideUp ('normal'); Jetzt müssen wir eine ELSE als Teil unserer Bedingungsanweisung verwenden. ELSE entfernt also die aktive Klasse und schiebt das Menü nach oben, um es auszublenden. Dies ist nur so, dass wir jedes Menü kodieren können, ohne die Seite neu laden zu müssen.
Hinweis: Wenn Sie die Geschwindigkeit der Folie ändern möchten, ändern Sie normal in, z. '500'. Das wird es bei 500 Millisekunden verschieben.
Wenn Sie daran interessiert sind, jQuery von Grund auf zu lernen, sollten Sie den kostenlosen Learn jQuery in 30 Days-Kurs von tutsplus.com ausprobieren.
Nun, wir haben es bis zum Ende geschafft! Wir haben Ormans schönes vertikales Navigationsmenü mit CSS3 und jQuery zusammengestellt! Bleiben Sie dran und erfahren Sie, wie Sie dies mithilfe von CSS3 und dem Pseudo-Selector: target erstellen können.
#wrapper width: 440px; Schriftgröße: 1em Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
