Codieren eines Graceful Breadcrumb-Navigationsmenüs in CSS3
Navigationsmenüs und Links sind möglicherweise die wichtigsten Elemente der Benutzeroberfläche eines Weblayouts. Dies sind die einzigen Verkaufsstellen für Benutzer Reisen zwischen Seiten und mit allen von Ihnen erstellten Inhalten interagieren. Breadcrumb bietet ähnliche Funktionen mit dem zusätzlichen Vorteil von Verfolgung Ihrer aktuellen Position. Du wirst in der Lage sein Alle vorherigen Linkpfade anzeigen während der Benutzer Ihre Site-Hierarchie durchquert.
In diesem Tutorial erstellen wir ein brillantes Navigationsmenü mit einigen CSS3-Effekten. Dies wurde getestet, um in allen gängigen CSS3-kompatiblen Browsern zu funktionieren. Selbst ältere Browser, die CSS3 nicht unterstützen, rendern es in den meisten Fällen trotzdem richtig.
Bevor wir uns mit Code beschäftigen, werden wir ein wenig über die Funktionalität unseres Breadcrumb sprechen!
Den Weg anbieten
Ein Breadcrumb-Pfad ist nicht komplexer als jedes andere Menü. In unseren Stilen werden wesentlich komplexere CSS-Eigenschaften verwendet als in den meisten Beispielen. Dennoch ist unsere Bare-Bones-Vorlage immer noch vorhanden, um Benutzer von einer Seite zur anderen zu führen.
In diesem Beispiel erstellen wir einen ähnlichen Stil wie das Google-Supportmenü. Sie können das Menü auf der Google Mail-Support-Seite anzeigen, um einen Überblick darüber zu erhalten, wohin wir gehen. Letztendlich wollen wir bieten unsere beste Benutzererfahrung für alle Benutzer, unabhängig von deren Betriebssystem oder Browsersoftware habe ich also gebaut 2 verschiedene Codebeispiele zur Unterstützung der schonenden Verschlechterung älterer Browser.
Der erste ist gebaut mit benutzerdefinierte Hintergrundbilder und richtige CSS-Alignments. Alle Hover-Events und aktiven Events sind mit nur wenigen CSS-Styles vorgefertigt, aber Benutzer, die Bilder deaktiviert haben, 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 sich nicht sicher sind, beide Styles zu unterstützen, können Sie zwischen ihnen für Ihre eigene Website wählen. Die meisten Besucher verwenden standardmäßig Bilder, durchsuchen jedoch das Analysetool Ihrer Website, wenn Sie genauere Besucherdaten wünschen.
Genug worte, Lass uns in das Projekt springen! Wir beginnen mit dem Aufbau des grundlegenden HTML-Frameworks und gehen auf verschiedene Stileffekte ein. Zuerst Sie müssen das Bild herunterladen für das Projekt erforderlich.
Nackte Knochen HTML
Ich beginne mein Dokument mit der Standard-HTML5-Seitenvorlage. Dazu gehören der Standarddoktyp, das verknüpfte CSS und alle Basiselemente. Ich habe den folgenden Code hinzugefügt, wenn Sie Ihr eigenes Dokument auf diese Weise erstellen möchten. Beachten Sie, dass dies keine Auswirkungen auf die Darstellung Ihres Breadcrumb haben sollte. Sie können also gerne Ihre eigene Seitenvorlage verwenden, wenn Sie möchten.
Standardseite
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 sein eigenes ICH WÜRDE So können wir den Inhalt viel einfacher identifizieren. Wenn Sie auch ein Fan von jQuery sind, können Sie die #ID-Wahlschalter um alle internen DOM-Elemente zu bearbeiten.
Zuerst haben wir eine div enthalten mit der id “Paniermehl“. In der Demo-Datei habe ich diesen Code verwendet, um den Code zu trennen und mit ein paar zusätzlichen Rändern über die Seite zu verschieben. Sie können dieses äußere Div entfernen, aber Sie müssen alles neu formatieren, um die neue Vorlage anzupassen. Es tut wirklich nicht weh, einen Container zu verlassen, da Sie die Positionierung viel einfacher steuern können.
Intern habe ich die Breadcrumbs anhand einer ungeordneten Liste erstellt. Es gibt so viele verschiedene Möglichkeiten, gestylte HTML-Listen anzupassen. Breadcrumbs sind nur eine davon. Möglicherweise stellen Sie fest, dass ich den ersten Listeneintrag a gegeben habe Klasse von “zuerst“. Dies ist für einige zusätzliche Auffüllungen erforderlich, um die Menüelemente in Linie zu halten. Zusätzlich noch ein kleiner Spannblock wurde hinzugefügt, so dass wir einen rechten linken Rand haben, der das Hintergrundbild nicht überlappt.
Zusätzlich wird jeder Ankerlink mit einer abnehmenden Nummer für die gepflanzt z-index Eigentum. Mit Bildern müssen wir haben sich unsere Links überlappen um den Breadcrumb-Pfeil richtig anzuzeigen. Der einfachste Weg dies zu erreichen ist Z-Index anpassen So überlagert jeder Link den nächsten. Ich habe mit angefangen 9 und funktionierte von dort aus, aber wenn Sie mehr Links in Ihrem Menü haben, beginnen Sie einfach mit einer höheren Ganzzahl.
Menü ohne Bilder
Zu grausam unseren Brotkrumen abbauen Wir benötigen einen sekundären Satz von HTML-Listenelementen. Wenn Sie versuchen, auf eine einzige Navigation zurückzugreifen, können Sie mit jQuery den Browser-Agenten erkennen und eine entsprechende ID anwenden. Leider ist dies nicht immer zuverlässig (z. B. für bestimmte mobile Benutzer). Eine andere Lösung ist zu Fügen Sie ein IE-spezifisches Stylesheet hinzu und ausblenden oder anzeigen, welches Menü am besten funktioniert - Diese Option gilt jedoch nur für Internet Explorer.
breadcrumb2 ist unsere neue ID, mit der das Menü ohne Bilder angezeigt wird. Bleib bei diesem Muster, das ich verwendet habe Krümel2 als Klasse für die ungeordnete Liste. Beachten Sie, dass wir den Grund dafür verwenden Klassen ist für ihr Einfachheit, diese Menüs zu kopieren, Wenn Sie also ein paar verschiedene Breadcrumbs auf Ihrer Seite haben möchten, wird dies mit diesen Klassen nicht zu einem Problem.
Wir haben die behalten .zuerst Klasse aber zusätzlich angehängt .zuletztKlasse auf den endgültigen Listeneintrag. Ohne Bilder können wir die Pfeile nicht für jedes Element des Navigationsmenüs duplizieren, daher habe ich einige verwendet abgerundete Ecken um das sekundäre Menü aufzupeppen. .zuerst Klasse und .zuletzt Man kann den Randradius an den Rändern unseres Menüs verändern, um einen wirklich coolen Web 2.0-Stil zu erzeugen.
CSS gleitende Hintergrundbilder
Für einige der einfacheren Effekte habe ich beim Bau von Immobilien beide Breadcrumbs miteinander verbunden. Dies ist nützlich, da es nicht nur etwas Platz spart, sondern auch beim Bearbeiten von Stilen einfacher anpassbar dein eigenes Aussehen.
Für beide #Breadcrumb und # breadcrumb2 Ich habe eingestellt Listenstil: keine; Daher haben alle internen Elemente keine Markierungen. Wenn Sie den Effekt mögen, können Sie diese Einstellungen belassen, aber ich habe festgestellt, dass HTML für die Arbeit umständlich ist und es viel einfacher ist, neue Symbole zu erstellen. Fangen wir also mit unserem an .Krümel Klasse.
.Krümel Anzeige: Block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: besucht color: # 666; Bildschirmsperre; Schwimmer: 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'); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: 100% 0; Position: relativ; .crumbs li a: hover color: # 333; Hintergrundposition: 100% -48px; Cursor: Zeiger; .crumbs li a: active color: # 333; Hintergrundposition: 100% -96px; .crumbs li.first a span height: 29px; Breite: 3px; Rahmen links: 1px fest # d9d9d9; Position: absolut; oben: 0px; links: 0px; Wir Setze unsere ungeordnete Liste auf Block so kriecht nichts anderes in der Gegend. Beachten Sie die Listenelemente Inline angezeigt während jeder Anker-Link viel mehr Raum für die Verbreitung hat. Wir möchten, dass der gesamte Bereich in unserem Menü anklickbar ist Wir bauen unsere Anker als Blockelemente.
Ich habe ein Bild mit dem Namen verwendet bg-crumbs.png für den Hintergrund. Dies ist in CSS als einfaches Sprite-Sheet oder alternativ als a bekannt Schiebetüren Technik. Das heißt, wenn der Benutzer einen Link bewegt oder anklickt, verschieben wir die Hintergrundposition, um den aktualisierten Stil anzuzeigen. Dieses einzelne Bild enthält alle drei Designs, die wir benötigen, um die Breadcrumb-Hintergründe an verschiedenen Positionen zu erstellen, damit wir das verwenden können Hintergrundposition Zu verlagernde Eigenschaft basierend auf Benutzerinteraktion.
Benutzerdefinierte Effekte mit CSS3
Das ursprüngliche Breadcrumb-Design ist viel einfacher zu erstellen. Dies ist auffällig, da viele CSS-Eigenschaften grundlegender sind als Sie denken. Jetzt konzentrieren wir uns darauf, diese Effekte nur mit CSS3 zu duplizieren!
Die einzelnen Stile nehmen viel Platz in Anspruch, daher zerlege ich sie in 2 Codeblöcke.
.Krümel2 Anzeige: Block; Rand links: 27px; Polsterung: 0; Polsterauflage: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: besuchte color: # 666; Bildschirmsperre; Schwimmer: links; Schriftgröße: 12px; Polsterung: 7px 16px 7px 19px; Position: relativ; Textdekoration: keine; Rand: 1px fest # d9d9d9; Rahmenbreite rechts: 0px; .crumbs2 li a Hintergrundbild: -webkit-Gradient (linear, links unten, links oben, Farbstopp (0,45, rgb (241,241,241)), Farbstopp (0,73, rgb (245,245,245))); Hintergrundbild: -moz-linearer Gradient (mittlerer Boden, 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.first ein Rand oben links Radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; Rahmen unten rechts: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
Das .Krümel2 Menü verwendet CSS-Farbverläufe um die Hintergrundeffekte zu duplizieren. Wenn Sie mit diesen nicht vertraut sind, empfehle ich dringend die Anleitung von CSS Tricks zu CSS3-Farbverläufen, die Sie mit der effizienten Verwendung von CSS3-Farbverläufen vertraut machen sollte. 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-linearer Gradient sind die Kernlösungen, die die meiste Arbeit erledigen. Ich habe jedoch älteren Code für ältere Versionen von Internet Explorer hinzugefügt es ist nicht garantiert um die ganze Zeit einwandfrei anzuzeigen (wir verwenden schließlich leistungsfähige Bildwiedergabe-Techniken). Beachten Sie, dass ich sowohl RGB- als auch Hex-Farbcodes zwischen den Hintergrundeigenschaften festgelegt habe. Sie könnten sich an die eine oder andere Methode halten, wenn Sie sich wohler fühlen.
Das Grenzradius Code wird nur auf unsere sekundäre Navigationspfadnavigation angewendet. Dies hat einen ordentlichen Effekt in der oberen linken und rechten unteren Ecke unseres gesamten Breadcrumb-Menüs. Die Leiste scheint sich fast von der Seite zu entfernen - wirklich ein fantastischer Effekt für Browser, die die Stile unterstützen. Diese beziehen sich jedoch nur auf die Standardzustände unserer Links. Lassen Sie uns nun Hover-Effekte erstellen, die den oben verwendeten Bildern ähneln.
CSS3-Rahmen und Schatten
Immer wenn ein Benutzer über einen Link schwebt, möchten wir einige Dinge aktualisieren. Zuerst müssen wir es tun dunkle die Randfarben oben und unten unseres aktiven Elements. Dies ist in den Bildern sowohl für den Schwebeflug als auch für den aktiven Zustand zu sehen.
.crumbs2 li a: hover Randfarbe: # c4c4c4; Rahmenfarbe: # c4c4c4; Hintergrundbild: -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 (mittlerer Boden, 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: active border-top-color: # c4c4c4; Rahmenfarbe: # c4c4c4; Hintergrundbild: -webkit-Gradient (linear, links unten, links oben, 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 inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; Farbe: # 333;
Ich verwende genau denselben Gradientencode wie oben, aber dieses Mal unterscheiden sich die Farben erheblich, wenn Sie unsere RGB-Werte bemerken. Jeder der Zustände verdunkelt die Textfarbe auf # 333, Weitere Deskriptoren wurden leicht geändert, um den Benutzerbefehlen zu entsprechen.
Im Schwebeflug sehen Sie eine glänzender geprägter Effekt die gekoppelt mit dunkle Grenzen gibt die Popup-Seiten der Seite. Wenn Sie auf klicken und halten, gelangen Sie in den aktiven Zustand, in dem a angezeigt wird dunkler Hintergrundverlauf. Dieser Effekt bewirkt, dass die Schaltflächen tatsächlich so aussehen “gedrückt” auf der Seite.
Wir bewerben uns auch Box Schatten Eigenschaften aus den neuen CSS3-Spezifikationen. -Webkit, -moz, und Standardstile werden mit denselben Einstellungen verwendet. Schwebende Anzeigen a Licht Schatten Sie kommen am unteren Rand des ausgewählten Links. Wenn aktiv, wird der Schatten am oberen, rechten und unteren Rand gebildet. Dieser Effekt wird mit der erzeugt Einsatz Schlüsselwort am Ende jeder Box-Shadow-Eigenschaftszeile hinzugefügt. Auch hier ist CSS Tricks Ihr bester Freund mit einem tollen Artikel über Box-Shadow, der über die Syntax und die korrekte Verwendung von CSS3 spricht.
Bonus: Weitere Styles
Zusätzlich zum Tutorial-Code habe ich zusätzliche Hintergrundbilder mit angepassten Farbschemata hinzugefügt. Ich habe aus den ursprünglichen Hintergründen gesampelt und mit Adobe Photoshop einige Variationen erstellt, die Sie auf Ihrer eigenen Website anwenden können.
Diese Bonusdateien sind in der Quelldatei enthalten das Sie im ZIP-Archivformat unten herunterladen können.
Sie können sich das Bild oben ansehen, um eine Vorstellung davon zu bekommen, worüber ich spreche. Wenn Sie ein bestimmtes Farbschema benötigen, öffnen Sie das Fenster Photoshop> Bild> Anpassungen> Farbton / Sättigung Denken Sie daran, um das Farbschema an Ihre eigene Vorlage anzupassen Aktivieren Sie die Option "Einfärben" im Farbton / Sättigungsbereich, wenn sich die Farbe überhaupt nicht geändert hat.
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 wurden und so gebaut wurden, dass sie sich in älteren Browsern elegant abbauen können. Zusätzlich habe ich meinen Demo-Code und einige Bonusbilder für Sie zum Spielen angeboten.
Gefällt dir besonders die Stile, die wir hier konstruiert haben? Oder haben Sie Fragen oder Ideen, wie Sie den Tutorial-Code verbessern können? Bitte teilen Sie uns Ihre Gedanken mit uns im Diskussionsbereich und vergessen Sie nicht, die Quelldateien herunterzuladen, damit Sie mit der Demo spielen können!
Weitere CSS3-Tutorials
Lust auf mehr CSS3? Im Folgenden finden Sie unsere Artikel, um CSS3 theoretisch und praktisch zu verstehen!
- CSS3: Erstellen Sie ein RSS-Feed-Logo
- CSS3: Ein Suchfeld erstellen
- CSS3: Erstellen Sie ein AJAX-Kontaktformular
- CSS3: Erstellen von HTML5 / CSS3-Webseiten
