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.
Pingback: Breadcrumb-Navigation - Anleitung auf cne_LOG » Pixeldrama