Markup

Breadcrumb-Navigation nach Apple-Vorbild

Sehr schlicht ist die Brotkrumen-Navigation der apple.com-Website:

Apple-Breadcrumb

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

Unsere Apple-Breadcrumb-Navigation

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.

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

5 Kommentare

  1. 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.

  2. Stimmt, darüber habe ich gar nicht nachgedacht 😉 Eine Aufgabe für ein paar ruhigere Minuten.

  3. Pingback: Breadcrumb-Navigation - Anleitung auf cne_LOG » Pixeldrama

  4. Thanks so much for sharing this. I got it working with the „Breadcrumb NavXT“ plugin for WordPress. Looks nice!

Kommentare sind geschlossen.