Ein graziles Breadcrumb Navigationsmenü in CSS3 kodieren

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

Navigationsmenüs und Links sind möglicherweise die wichtigsten Schnittstellenelemente zu einem Weblayout. Dies sind die einzigen Möglichkeiten für Nutzer, zwischen den Seiten zu wechseln und mit allen von Ihnen erstellten Inhalten zu interagieren. Breadcrumb bietet ähnliche Funktionen mit dem zusätzlichen Vorteil , Ihre aktuelle Position zu verfolgen . Sie können alle vorherigen Linkpfade anzeigen, während der Benutzer Ihre Standortshierarchie durchläuft.

In diesem Tutorial erstellen wir ein brillantes Breadcrumb-Navigationsmenü mit einigen CSS3-Effekten. Dies wurde getestet, um in allen gängigen CSS3-kompatiblen Browsern zu funktionieren, sogar ältere Browser, die CSS3 nicht unterstützen, werden es in den meisten Fällen immer noch richtig rendern.

Bevor wir uns dem Code zuwenden, werden wir ein wenig über die Funktionalität unseres Breadcrumbs sprechen.

Den Trail anbieten

Ein Brotkrumen-Trail ist nicht komplexer als jedes andere Menü. Unsere Styles verwenden wesentlich komplexere CSS-Eigenschaften als die meisten Beispiele. Dennoch ist unsere Barebone-Vorlage immer noch vorhanden, um Benutzer von einer Seite zur nächsten zu führen.

In diesem Beispiel erstellen wir einen ähnlichen Stil wie das Google-Support-Menü. Sie können ihr Menü auf der Google Mail-Supportseite anzeigen, um eine Vorstellung davon zu erhalten, wohin die Reise geht. Letztendlich möchten wir allen Benutzern die beste Benutzererfahrung bieten, unabhängig von ihrem Betriebssystem oder ihrer Browsersoftware. Daher habe ich zwei verschiedene Codebeispiele erstellt, um die allmähliche Verschlechterung älterer Browser zu unterstützen .

Der erste basiert auf benutzerdefinierten Hintergrundbildern und geeigneten CSS-Alignments . Alle Hover-Ereignisse und aktiven Ereignisse sind mit nur wenigen CSS-Stilen vordefiniert, aber Benutzer, deren Bilder deaktiviert sind, können diese Effekte nicht erleben! Aus diesem Grund habe ich auch ein ähnliches Menü mit CSS-Verläufen, abgerundeten Ecken und Box-Schatten erstellt.

Wenn Sie nervös sind, wenn Sie beide Stile unterstützen, können Sie zwischen ihnen für Ihre eigene Website wählen. Die meisten Besucher werden standardmäßig Bilder verwenden, aber durchsuchen Sie Ihr Website-Analysetool, wenn Sie genauere Besucherdaten wünschen.

Genug Worte, lasst uns in das Projekt springen ! Wir beginnen mit der Erstellung des grundlegenden HTML-Frameworks und bewegen uns in verschiedene Stileffekte. Zuerst müssen Sie das für das Projekt erforderliche Bild herunterladen .

Bare-Bones HTML

Ich beginne mein Dokument mit der HTML5-Standardseitenvorlage . Dazu gehören der Standard-Doctype, das verknüpfte CSS und alle grundlegenden Elemente. Ich habe den folgenden Code hinzugefügt, wenn Sie auf diese Weise ein eigenes Dokument erstellen möchten. Beachten Sie, dass dies keinen Einfluss darauf hat, wie Ihr Breadcrumb angezeigt wird. Sie können also Ihre eigene Seitenvorlage verwenden, wenn Sie möchten.

Ich werde den Code in zwei verschiedene Blöcke aufteilen. Der erste Block mit Bildern ist etwas anders aufgebaut, gefolgt von unserem Menü ohne Bilder. Jeder Satz erhält eine eigene ID, sodass wir den Inhalt leichter identifizieren können. Wenn Sie auch ein Fan von jQuery sind, können Sie mit dem #ID-Selektor alle internen DOM-Elemente bearbeiten .

Zuerst haben wir ein containing div mit der ID " breadcrumb ". In der Demo-Datei habe ich diesen verwendet, um unseren Code zu trennen und ihn mit einigen zusätzlichen Rändern über die Seite zu verschieben. Sie können dieses äußere Teil entfernen, aber Sie müssen alles neu formatieren, damit es in die neue Vorlage passt. Es tut wirklich nicht weh, einen Behälter zu verlassen, da du die Positionierung viel einfacher steuern kannst.

Intern habe ich die Brotkrumen mit einer ungeordneten Liste erstellt. Es gibt so viele einzigartige Möglichkeiten, gestylte HTML-Listen anzupassen, und Breadcrumbs sind nur eine davon. Vielleicht bemerken Sie, dass ich dem ursprünglichen Listenelement eine Klasse von " zuerst " gegeben habe. Dies ist für eine zusätzliche Auffüllung erforderlich, um die Menüelemente in einer Linie zu halten. Zusätzlich wird ein kleiner Span Block hinzugefügt, so dass wir einen richtigen linken Rand haben, der das Hintergrundbild nicht überlappt.

Zusätzlich wird für jede Ankerverknüpfung eine abnehmende Zahl für die z-index- Eigenschaft festgelegt. Bei der Verwendung von Bildern müssen sich die einzelnen Links überlappen, damit der Breadcrumb-Pfeil ordnungsgemäß angezeigt wird. Der einfachste Weg, dies zu erreichen, ist die Anpassung des Z-Index, so dass jeder Link den nächsten überlagert. Ich begann mit 9 und arbeitete von dort aus, aber wenn Sie mehr Links in Ihrem Menü haben, beginnen Sie einfach mit einer höheren Ganzzahl.

Menü ohne Bilder

Um unseren Breadcrumb elegant zu degradieren, benötigen wir einen zweiten Satz von HTML-Listenelementen. Wenn Sie versuchen, auf eine einzelne Navigation zurückzugreifen, können Sie jQuery verwenden, um den Browser-Agenten zu erkennen und eine ID entsprechend anzuwenden. Leider ist dies nicht immer zuverlässig (zum Beispiel für bestimmte mobile Benutzer). Eine andere Lösung besteht darin, ein IE-spezifisches Stylesheet einzufügen und das Menü, das am besten funktioniert, auszublenden oder anzuzeigen - aber natürlich ist diese Option nur für Internet Explorer.

breadcrumb2 ist unsere neue ID, um das Menü ohne Bilder anzuzeigen. In crumbs2 mit diesem Muster habe ich crumbs2 als Klasse für die ungeordnete Liste verwendet. Beachten Sie, dass der Grund, warum wir Klassen verwenden, die Einfachheit ist, diese Menüs zu duplizieren. Wenn Sie also ein paar verschiedene Breadcrumbs auf Ihrer Seite haben wollen, wird dies mit diesen Klassen niemals zu einem Problem werden.

Wir haben die .first Klasse .first, aber zusätzlich die .last Klasse an den endgültigen Listeneintrag angehängt. Ohne Bilder können wir die Pfeile für jedes Element des Navigationsmenüs nicht duplizieren, daher habe ich einige abgerundete Ecken benutzt, um das sekundäre Menü aufzupeppen. .first Klasse und .last manipulieren den Rand-Radius an den Rändern unserer Speisekarte, um einen wirklich coolen Web-2.0- .last -Stil zu kreieren.

CSS-Hintergrundbilder verschieben

Für einige der einfacheren Effekte habe ich beide Breadcrumbs beim Erstellen von Eigenschaften miteinander verbunden. Dies ist nützlich, da es nicht nur etwas Platz spart, sondern auch beim Bearbeiten von Stilen leichter angepasst werden kann.

Für #breadcrumb und #breadcrumb2 #breadcrumb habe ich einen list-style: none; Daher haben alle internen Elemente keine Markierungen. Du könntest diese lassen, wenn du den Effekt magst, aber ich fand, HTML wird ermüdend, um herumzuarbeiten und es ist viel einfacher, neue Icons zu erstellen. Beginnen wir mit unserer Klasse .crumbs .

 .crumbs {Anzeige: Block; } .crumbs li {Anzeige: Inline; } .crumbs li.first {padding-left: 8px; } .crumbs li a, .crumbs li a: Verweis, .crumbs li a: besucht {color: # 666; Bildschirmsperre; schweben: links; Schriftgröße: 12px; Rand links: -13px; Polsterung: 7px 17px 11px 25px; Position: relativ; Textdekoration: keine; } .crumbs li a {Hintergrundbild: URL ('../ img / bg-crumbs.png'); Hintergrund-Wiederholung: keine Wiederholung; Hintergrundposition: 100% 0; Position: relativ; } .crumbs li a: hover {farbe: # 333; Hintergrundposition: 100% -48px; Cursor: Zeiger; } .crum li a: aktiv {color: # 333; Hintergrundposition: 100% -96px; } .crumbs li.first ein span {height: 29px; Breite: 3px; Grenze-links: 1px fest # d9d9d9; Position: absolut; oben: 0px; links: 0px; } 

Wir legen unsere ungeordnete Liste auf Block, so dass nichts anderes in der Gegend schleicht. Beachten Sie, dass die Listenelemente inline angezeigt werden, während jedem Anker-Link viel mehr Platz zum Ausbreiten gegeben wird. Wir möchten, dass der gesamte Platz in unserem Menü anklickbar ist, daher müssen unsere Anker als Blockelemente erstellt werden .

Ich habe ein Bild namens bg-crumbs.png für den Hintergrund verwendet. Dies ist in CSS als einfaches Sprite Sheet oder alternativ als Schiebetürtechnik bekannt. Das bedeutet, wenn der Benutzer einen Link bewegt oder klickt, verschieben wir die Hintergrundposition, um den aktualisierten Stil anzuzeigen. Dieses einzelne Bild enthält alle drei Designs, die zum Erstellen der Breadcrumb-Hintergründe an verschiedenen Positionen benötigt werden. Daher können wir die Eigenschaft background-position, um basierend auf der Benutzerinteraktion zu verschieben.

Benutzerdefinierte Effekte mit CSS3

Das ursprüngliche Breadcrumb-Design ist viel einfacher zu erstellen. Dies ist bemerkenswert, da viele der CSS-Eigenschaften einfacher sind, als Sie es sich vorstellen, aber jetzt beginnen wir uns darauf zu konzentrieren, diese Effekte nur mit CSS3 zu duplizieren!

Die einzelnen Stile nehmen viel Platz in Anspruch, also teile ich sie in 2 Codeblöcke auf.

 .crumbs2 {Anzeige: Block; Rand links: 27px; Auffüllen: 0; padding-top: 10px; } .crumbs2 li {Anzeige: Inline; } .crumbs2 li a, .crumbs2 li a: Verweis, .crumbs2 li a: besucht {color: # 666; Bildschirmsperre; schweben: links; Schriftgröße: 12px; Padding: 7px 16px 7px 19px; Position: relativ; Textdekoration: keine; Grenze: 1px fest # d9d9d9; Rahmen-rechts-Breite: 0px; } .crumbs2 li a {Hintergrundbild: -Webkit-Gradient (linear, links unten, oben links, Farbstopp (0.45, rgb (241.241.241)), Farbstopp (0.73, rgb (245.245.245))); Hintergrundbild: -moz-linearer-Gradient (Mitte unten, rgb (241, 241, 241) 45%, rgb (245, 245, 245) 73%); / * Für Internet Explorer 5.5 - 7 * / Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Für Internet Explorer 8 * / -ms-Filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; } .crumbs2 li.erste a {border-top-left-radius: 5px; -moz-border-radius-oben: 5px; -webkit-border-top-links-radius: 5px; } .crumbs2 li.last a {Rahmen-rechts-Breite: 1px; Grenze-unten-rechts-Radius: 5px; -moz-border-radius-unten rechts: 5px; -webkit-border-bottom-right-radius: 5px; } 

Das Menü .crumbs2 verwendet CSS-Verläufe, um die Hintergrundeffekte zu duplizieren. Wenn Sie mit diesen nicht vertraut sind, empfehle ich Ihnen die CSS Tricks-Anleitung zu CSS3 Gradients, mit der Sie effizient CSS3-Gradienten verwenden können. Sie enthalten einige weitere Eigenschaften für Microsoft- und Opera-Browser, die jedoch nicht in allen Fällen vollständig unterstützt werden. Ich habe sie hier nicht in den Demo-Code aufgenommen - aber es ist gut, alle Optionen zu verstehen.

-webkit-gradient und -moz-linear-gradient sind die -moz-linear-gradient die die meiste Arbeit erledigen. Ich habe Legacy-Code für ältere Versionen von Internet Explorer hinzugefügt, aber es ist nicht garantiert, dass er immer richtig angezeigt wird (wir verwenden schließlich leistungsfähige Bildwiedergabetechniken). Beachten Sie, dass ich sowohl RGB- als auch Hex-Farbcodes zwischen den Hintergrundeigenschaften eingestellt habe. Sie können sich an die eine oder andere Methode halten, wenn Sie sich wohler fühlen.

Der Grenzradiuscode wird nur auf unsere sekundäre Breadcrumb-Navigation angewendet. Dies ergibt einen schönen Effekt oben links und unten rechts in unserem gesamten Brotkrumenmenü. Die Leiste scheint fast aus der Seite zu springen - wirklich ein fantastischer Effekt auf Browser, die die Stile unterstützen, aber diese decken nur die Standardzustände für unsere Links ab. Lassen Sie uns nun Hover-Effekte ähnlich den oben verwendeten Bildern erstellen.

CSS3 Rahmen und Schatten

Immer wenn ein Benutzer über einen Link schwebt, möchten wir ein paar Dinge aktualisieren. Zuerst müssen wir die Rahmenfarben oben und unten auf unserem aktiven Element abdunkeln . Dies ist in den Bildern sowohl für den Status "Schweben" als auch für den Status "Aktiv" zu sehen.

 .crumbs2 li a: schweben Sie {border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linear, links unten, links oben, Farbstopp (0.45, rgb (241.241.241)), Farbstopp (0.73, rgb (248.248.248))); Hintergrundbild: -moz-linearer Gradient (Mitte unten, rgb (241, 241, 241) 45%, rgb (248, 248, 248) 73%); / * Für Internet Explorer 5.5 - 7 * / Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Für Internet Explorer 8 * / -ms-Filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; Farbe: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; Box-Schatten: 0px 2px 2px # e8e8e8; } .crumbs2 li a: aktiv {border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linear, links unten, oben links, Farbstopp (0.45, rgb (224.224.224)), Farbstopp (0.73, rgb (235.235.235))); Hintergrundbild: -moz-linearer-Gradient (Mitte unten, rgb (224, 224, 224) 45%, rgb (235, 235, 235) 73%); / * Für Internet Explorer 5.5 - 7 * / Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Für Internet Explorer 8 * / -ms-Filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; Box-Schatten: -1px 1px 1px 0px #dadada Einfügung; -webkit-box-shadow: -1px 1px 1px 0px #dadada Einfügung; -moz-box-shadow: -1px 1px 1px 0px #dadada Einfügung; Farbe: # 333; } 

Ich benutze den gleichen Gradientencode wie oben, aber dieses Mal sind die Farben sehr unterschiedlich, wenn Sie unsere RGB-Werte bemerkt haben. Jeder der Zustände wird die Textfarbe auf #333 verdunkeln, und andere Deskriptoren wurden leicht geändert, um den Benutzerbefehlen zu entsprechen.

Beim Schweben sehen Sie einen glänzenden Prägeeffekt, der zusammen mit den dunklen Rändern der Seite Popup-Stile verleiht. Wenn Sie klicken und halten, gelangen Sie in den aktiven Zustand mit einem dunklen Hintergrund . Dieser Effekt bewirkt, dass die Schaltflächen so aussehen, als wären sie auf der Seite "gedrückt".

Wir wenden auch Box-Shadow- Eigenschaften aus den neuen CSS3-Spezifikationen an. -webkit, -moz und Standardstile werden mit denselben Einstellungen verwendet. Beim Schweben wird ein heller Schatten angezeigt, der am unteren Rand des ausgewählten Links erscheint. Wenn aktiv, wird der Schatten am oberen, rechten und unteren Rand gebildet. Dieser Effekt wird mit dem Schlüsselwort inset erstellt, das am Ende jeder Box-shadow-Eigenschaft hinzugefügt wird. Wieder ist CSS Tricks Ihr bester Freund hier mit einem tollen Artikel über Box-Shadow, da es über die Syntax und ihre korrekte Verwendung in CSS3 spricht.

Bonus: Mehr Stile

Zusätzlich zum Tutorial-Code habe ich zusätzliche Hintergrundbilder mit angepassten Farbschemata eingefügt. Ich habe aus den Originalhintergründen gesampelt und mit Adobe Photoshop einige Variationen erstellt, die Sie auf Ihrer eigenen Website anwenden können.

Diese Bonus-Dateien sind in der Quelldatei enthalten, die Sie im .zip-Archivformat im folgenden Abschnitt herunterladen können.

Sie können das Bild oben überprüfen, um eine Vorstellung davon zu bekommen, wovon ich rede. Wenn Sie ein bestimmtes Farbschema benötigen, öffnen Sie Photoshop> Bild> Anpassungen> Farbton / Sättigung, um das Farbschema an Ihre eigene Vorlage anzupassen. Denken Sie daran, die Option Kolorieren im Bereich Farbton / Sättigung zu aktivieren, wenn sich die Farbe überhaupt nicht ändert .

Fazit

Dieses Tutorial sollte Sie mit einigen der neueren CSS3-Techniken vertraut gemacht haben. Wir haben zwei fantastische Breadcrumb-Menüs erstellt, die auf ähnliche Weise gestaltet sind und so gestaltet sind, dass sie sich in älteren Browsern gut absetzen können. Zusätzlich habe ich meinen Demo-Code und einige Bonusbilder zum Spielen angeboten.

Gefallen dir besonders die Stile, die wir hier entworfen haben? Oder haben Sie vielleicht Fragen oder Anregungen zur Verbesserung des Tutorial-Codes? Bitte teilen Sie uns Ihre Gedanken im unten stehenden Diskussionsbereich mit und vergessen Sie nicht, die Quelldateien herunterzuladen, damit Sie mit der Demo spielen können!

Mehr CSS3 Tutorials

Lust auf mehr CSS3? Im Folgenden finden Sie unsere Artikel, mit denen Sie CSS3 theoretisch und praktisch verstehen können!

• CSS3: Erstellen Sie ein RSS-Feed-Logo
• CSS3: Erstellen Sie ein Suchfeld
• CSS3: Erstellen Sie ein AJAX-Kontaktformular
• CSS3: Erstellen von HTML5 / CSS3-Webseiten

20 WordPress Plugins zur Verbesserung der Postverwaltung - Best of

Zuvor habe ich einen Beitrag zu einigen nützlichen Plugins geschrieben, mit denen Sie mehrere WordPress-Websites verwalten können. Als Blogger ist die Verwaltung Ihrer Website jedoch nur die halbe Aufgabe. Der zweitwichtigste Aspekt ist die Verwaltung Ihrer Posts .Wie wir wissen, bedeutet ein besseres Post-Management eine bessere Produktivität - und was gibt es besseres, als das mit Hilfe nützlicher WordPress-Plugins. Al

(Tech- und Design-Tipps)

10 neue Funktionen von HTML 5.1 und wie man sie IRL benutzt

Die HTML-Spezifikation wurde vor ein paar Wochen grundlegend überarbeitet, als W3C im November 2016 seine neue HTML 5.1-Empfehlung veröffentlichte. In seinem letzten Blogpost nannte W3C die neue Hauptversion den Goldstandard, da HTML 5.1 uns neue Wege bietet Wir können HTML verwenden, um flexiblere Web-Erlebnisse zu erstellen.In

(Tech- und Design-Tipps)