Heute erstellen wir ein funktionierendes horizontales CSS-Menü von Grund auf. Wir werden transparente PNGs (leider veraltete Browserbenutzer) verwenden, um einen glänzenden horizontalen Balken zu erstellen, dessen Farbe einfach nur mit CSS geändert werden kann. Bevor wir beginnen, sehen Sie sich an, was wir in der Live-Demo bauen werden.
PSD erstellen
Die Photoshop-Arbeit für das Menü ist ziemlich minimal und sollte nur einige Minuten dauern. Ich habe es in fünf super einfache Schritte aufgeteilt.
Feste Bar
Erstellen Sie eine neue RGB-Datei in Photoshop und zeichnen Sie einen 45 Pixel hohen farbigen Balken (ich habe # 4d4e50 verwendet) auf der gesamten Leinwand.
Gradient
Als Nächstes greifen Sie auf das Verlaufswerkzeug und stellen Sie sicher, dass es auf einen Verlauf eingestellt ist, der bei Schwarz beginnt und bei Transparent endet. Strecken Sie den Verlauf von unten senkrecht über Ihren grauen Balken.
Glanz
Machen Sie einen weißen Streifen, der an der Oberseite Ihres grauen Balkens ausgerichtet ist, aber nur die Hälfte der vertikalen Entfernung ausdehnt. Setzen Sie die Deckkraft dieses Streifens auf 7%.
Streifen
Machen Sie zwei weitere weiße Streifen, diesmal nur einige Pixel hoch, und setzen Sie sie leicht oben und unten in den grauen Balken ein.
Speichern
Ob Sie es glauben oder nicht, das ist alles, was wir brauchen! Deaktivieren Sie vor dem Speichern des PNG die ursprüngliche Farbleistenebene. Auf diese Weise können wir die Farbe in unserem CSS ändern. Beachten Sie auch, dass wir nicht das gesamte Bild benötigen, da wir es so einstellen, dass es horizontal wiederholt wird. Schneiden Sie einfach ein kleines vertikales Stück heraus und gehen Sie zu "Speichern für Web & Geräte". Speichern Sie Ihre PNG.
Das HTML
Ich werde hier ein grundlegendes Verständnis von HTML und CSS voraussetzen. Ich werde versuchen, so beschreibend wie möglich zu sein, ohne alles zeilenweise zu erklären.
Das leere HTML
Wir beginnen mit einer einfachen, leeren HTML-Seite.
Container
Jetzt fügen wir einen Container div hinzu, der das Navigationsmenü div enthält.
Menüstruktur
Um unser HTML zu beenden, fügen Sie eine ungeordnete Liste ein, die spanische Elemente für Zuhause, Info, Dienste, Arbeit und Kontakt enthält. Dies ist die Basis für unsere Menüpunkte. Wir fügen den Hintergrund ein und gestalten diese Liste in CSS.
Das CSS
Das CSS wird den Großteil der Arbeit enthalten. Wir haben bisher nur eine Liste mit Links erstellt, damit Ihre Seite so aussehen sollte:
Hintergrundfarbe
Als erstes färben wir den Hintergrund ein wenig, um den langweiligen weißen Hintergrund aufzubrechen. Fügen Sie einfach den folgenden Ausschnitt zum Körper hinzu.
Grundlegendes Container-Styling
Um mit dem Gestalten des Containers zu beginnen, setzen Sie die Position auf relativ und die Höhe auf 45 Pixel (dies ist die Höhe unserer Photoshop-Grafik). Stellen Sie dann Farbe und Hintergrund auf Weiß und die Breite auf 100% ein, so dass sie sich über das gesamte Fenster erstreckt.
Dieser Code sollte in Ihrer Vorschau zu einem Durcheinander führen. Keine Sorge, so sollte es jetzt aussehen!
Bild hinzufügen und gestalten
Jetzt werden wir uns mit dem Zeug beschäftigen, das es wie ein Menü aussehen lässt! Diesmal zielen wir auf das navMenu div mit den Links. Stellen Sie Ihre Position erneut auf relativ und die Höhe auf 45px ein. Wir fügen an dieser Stelle keinen Text hinzu, sondern setzen die Schriftgröße auf 17px. Als Nächstes stelle ich die Hintergrundfarbe und das Hintergrundbild mit einer einzigen Codezeile ein. Beachten Sie, dass die Farbe (# 4d4e50) die Farbe unserer ursprünglichen Farbleiste in Photoshop ist. Diese Einstellung ist der Schlüssel zur Flexibilität dieses Menüs. Wenn Sie diesen Wert ändern, ändert sich die Farbe des Navigationsmenüs, sodass Sie ihn ganz einfach anpassen können. Nachdem Sie eine Farbe eingestellt haben, werfen Sie das Hintergrundbild ein und legen Sie fest, dass es sich auf der x-Achse wiederholen soll.
Wenn Sie nun eine Vorschau der Seite anzeigen, sollten Sie eine glatte und glänzende Menüleiste sehen! Experimentieren Sie mit dem Ändern dieses Farbwerts, um zu sehen, wie das Bild beim Ändern der Farben seinen Glanz behält.
Adressierung der Links
Als Nächstes fügen wir der ungeordneten Liste ein großes Stück CSS hinzu, um unsere Links in Position zu bringen. Setzen Sie für den allgemeinen ungeordneten Listenabschnitt den Rand und die Auffüllung auf 0, den Listenstil auf none, die Breite auf auto und den Float auf links. Stilisieren Sie dann die Listenelemente in der ungeordneten Liste (li). Wir schweben wieder nach links, merken diesmal aber die Anzeige auf? Block? und unsere Margen auf 0 1px.
Schauen Sie sich Ihre Seite in Safari an. Die Listenelemente sollten jetzt horizontal ausgerichtet sein.
Den Text gestalten
Richten Sie nun die Link-Elemente (a) im Menü aus. Stellen Sie die Anzeige auf Block, den Float auf links, die Höhe auf 45px und die Farbe auf Weiß. Setzen Sie die Textdekoration auf none, um den Unterstrich zu entfernen. Um die Links ein wenig auszuräumen, setzen Sie den Abstand auf 0 0 0 30px (im Uhrzeigersinn: oben 0, rechts 0, unten 0, links 30).
Der Text sollte näher an den Stellen aussehen, an denen wir ihn jetzt haben möchten, aber es ist immer noch ein bisschen dran.
Diesmal zielen Sie auf die ungeordnete Liste, das Listenelement und die Link-Span-Elemente (das Targeting wird etwas verrückt). Beachten Sie, dass ich mehr Polsterung hinzugefügt habe, um die Dinge besser auszurichten und eine Höhe und einen Schwimmkörper festzulegen. Als Nächstes sehen wir ein bisschen Code, den ich von Chris Coyier bei CSS-Tricks geliehen habe, was uns eine wirklich schöne Schriftart für das Menü gibt. Im Wesentlichen ist HelveticaNeue-Light unsere bevorzugte Wahl hier, sodass die Zuschauer, die es installiert haben, es sehen werden.Diejenigen, die dies nicht tun, kehren einfach zur nächsten Inline-Schriftart zurück, bis ihr Browser eine installierte Option findet. In den Worten von Chris? Könnte auch die schönste Helvetica verwendet werden? ?
Jetzt ist unser Menütext schön gestaltet und an Ort und Stelle!
Hover-Effekte hinzufügen
Der letzte Schritt besteht darin, einige schöne Hover-Effekte hinzuzufügen, so dass Sie leicht erkennen können, welche Option Sie gerade auswählen. Wir werden die Links beim Schweben mit unserem ersten Snippet und die Spannweiten beim Schweben im zweiten anvisieren. Hinweis unter? Hintergrund? Ich habe das gleiche Hintergrundbild eingefügt, das wir für die Menüleiste selbst verwenden. So behält unsere Schwebeflugoption den schönen Glanz bei. Dieses Mal habe ich jedoch die Hintergrundfarbe auf ein dunkleres Grau gesetzt. Dies sorgt für die Differenzierung unseres Hover-Effekts.
Voila! Jetzt haben wir ein wunderschön glänzendes CSS-Menü mit einem schönen Rollover-Effekt.
Farbe ändern
Die schlechte Nachricht ist, dass Browser ohne PNG-Unterstützung dies überhaupt nicht richtig anzeigen. Die gute Nachricht ist, dass Browser, die PNGs unterstützen (wissen Sie, die Browser des 21. Jahrhunderts), es verrückt machen, das Erscheinungsbild des Menüs mit nur zwei CSS-Farbwertänderungen vollständig zu ändern!
Suchen Sie einfach die zwei Stellen in Ihrem CSS, an denen das Hintergrundbild erscheint (einmal für die Leiste und einmal für den Rollover), und ändern Sie die vorhergehenden Farben. Schauen Sie sich an, was passiert, wenn wir ein anderes Menü erstellen und # 3d359a für die Hauptfarbe und # 5749e7 für die Schwebefarbe ersetzen.
Fazit
Ich hoffe, Sie haben ein paar Dinge über CSS gelernt und wurden dazu inspiriert, aus Gründen der Flexibilität mit Transparenz zu experimentieren. Mit JPGs können Sie leicht denselben Effekt erzeugen, aber dies würde mehr Bilder erfordern und Sie müssen jedes Mal, wenn Sie die Farbe ändern möchten, neue Bilder in Photoshop erstellen.