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:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vertical Navigation Menu: CSS3 Coded</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> </body> </html>
Und jetzt das Markup für unser Menü; eine ungeordnete Liste in einem enthaltenen Wrapper.
<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li> <li class="item2"><a href="#">Videos <span>147</span></a></li> <li class="item3"><a href="#">Galleries <span>340</span></a></li> <li class="item4"><a href="#">Podcasts <span>222</span></a></li> <li class="item5"><a href="#">Robots <span>16</span></a></li> </ul> </div>
Wir machen die Untermenüs, indem wir eine ungeordnete Liste in jedes unserer vorhandenen Listenelemente einfügen.
<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item2"><a href="#">Videos <span>147</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item3"><a href="#">Galleries <span>340</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item4"><a href="#">Podcasts <span>222</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item5"><a href="#">Robots <span>16</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> </ul> </div>
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:
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.
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
} 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.
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
} 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.
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
} 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.
body {
background:#32373d;
} 
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.
#wrapper {
font-size: 0.8125em; /* 13/16 = 0.8125*/
}
.menu > li > a {
height: 2.75em; /* 36/13 ≈ 2.75*/
line-height: 2.75em; /* 36/13 ≈ 2.75*/
text-indent: 2.75em; /* 36/13 ≈ 2.75*/
} 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.
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
} Es sieht jetzt richtig gut aus!
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.
.menu > li > a:hover,
.menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
} 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.
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
} 
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.
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
} 
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.
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
} Also sieht es jetzt ziemlich cool aus, oder? Ich denke, es ist Zeit, dass wir dem einige Funktionen hinzufügen!
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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
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.
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script> var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a'); Zuerst speichern wir das Untermenü und die Anker-Tags des Hauptmenüs in zwei verschiedenen Variablen. Das ist einfach, später darauf zu verweisen.
menu_ul.hide(); Dadurch werden alle Untermenüs ausgeblendet, wenn die Seite geladen wird
menu_a.click(function(e) { Zuerst werden wir ihm sagen, dass er etwas tun soll, wenn wir auf eines der Ankertags 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 dem Link '#' erstellen und es anklicken, wird es 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 das menu_a die Klasse 'active' hat, entfernen Sie sie.
menu_ul.filter(':visible').slideUp('normal'); Hier verwenden wir '.filter' und ':visible'. Wenn ein Menü geöffnet ist, schieben Sie es mit normaler 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 normaler Geschwindigkeit nach unten.
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal'); 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.
#wrapper {width: 440px; font-size: 1em} Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
