Sehr schlicht ist die Brotkrumen-Navigation der apple.com-Website:
Und dieses Menü lässt sich ganz leicht per CSS selbst gestalten. Dazu verwenden wir folgendes HTML-Gerüst:
<div class="breadcrumbs">
<a href="/">Home</a>
<span>></span>
<a href="/">Beispiel</a>
<span>></span>
<em>Breadcrumbs</em>
</div>
Bei deaktiviertem CSS wird der Aufbau deutlich:
Home > Beispiel > Breadcrumbs
Wir benutzen ein >
, um die Brotkrumen von einander zu trennen. Dieser Separator wird nun per CSS mit einem PNG, das auch Apple verwendet, hinterlegt.
Apple verwendet ein DHTML-Skript (iepngfix.htc), um die PNG-Transparenz im IE zu regeln – wir begnügen uns mit den CSS-Eigenschaften opacity
und filter:alpha
(für den IE):
div.breadcrumbs span {
background:url(breadcrumb.png) no-repeat left center;
overflow:hidden;
padding:0 0 0 10px;
width:0;
filter:alpha(opacity=40); /* für IE */
opacity:0.4;
}
Unsere Apple-Brotkrumennavigation
Fertig ist die Navigation.
Einige Beispiele findet ihr auf dieser Testseite: Apple Breadcrumb. Und natürlich sind auch andere Möglichkeiten der Gestaltung gegeben.
Das gesamte Paket bestehend aus HTML, CSS und Bildern könnt ihr auch herunterladen: apple-breadcrumb.rar.
Übrigens: Eine Lösung für PNGs im IE gibt es bei Peter Kröner, PNG ohne Reue: Die definitive Lösung. Eine kleine Statistik bietet der Artikel Breadcrumb Navigation von Web Design Practises und Usability News befassen sich mit dem Nutzen der Brotkrumennavigation: Breadcrumb Navigation: Further Investigation of Usage.
Eine sehr schöne Idee, vielen Dank!
Wenn die Zeilenhöhe nicht eingeschränkt und ein höherer Separator verwendet würde, dann müsste das Ganze auch noch toll aussehen wenn die Schriftgröße erhöht würde, denke ich.
Stimmt, darüber habe ich gar nicht nachgedacht 😉 Eine Aufgabe für ein paar ruhigere Minuten.
Ich habe die „Breadcrumb-Navigation“ auch mal als Textvariante probiert und muß sagen, es ist seht angenehm.
http://www.xoops-magazine.com
Vielen Dank Nadja
Pingback: Breadcrumb-Navigation - Anleitung auf cne_LOG » Pixeldrama
Thanks so much for sharing this. I got it working with the „Breadcrumb NavXT“ plugin for WordPress. Looks nice!