Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Breadcrumbs-Navigation erstellen

Bei vielen Seiten (auch hier im HTML-Seminar.de) gibt es zusätzlich zur normalen Steuerung noch eine Breadcrumbs-Navigation. Diese hat den Sinn, dass der Besucher sieht, wo er sich in den Tiefen der Website befindet und schnell wieder eine Ebene höher springen kann.

Beispiel einer Breadcrumbs-Navigation
Beispiel einer Breadcrumbs-Navigation

Diese Breadcrumbs-Navigation, auf Deutsch „Brotkrümelnavigation“ lehnt sich an das Märchen von Hänsel und Gretel an, die Brotkrumen auf dem Weg durch den Wald streuten (was natürlich umweltschutztechnisch ideal ist, da diese nur eine geringe Halbwertszeit haben).

Breadcrumbs-Navigation in HTML

Technisch handelt es sich um einfache Hyperlinks in der Form

<a href="/index.htm">Startseite</a>
<a href="/eben1.htm">Ebene 1</a>
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>

Das ganze sollte umschlossen werden von einem DIV mit der id (class ist genauso in Ordnung) „breadcrumbs“

<div id="breadcrumbs">
<a href="/index.htm">Startseite</a>
<a href="/eben1.htm">Ebene 1</a>
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>
</div>

Warum gerade dieser Benennung? Diese Benennung ist aus Sicht der Suchmaschinenoptimierung wichtig, da Google seit dem 2 Quartal 2010 angefangen hat, diese Breadcrumbs teilweise unterhalb seiner Ergebnisse vor der URL anzuzeigen.

Und zu guter Letzt sollte man noch eine Trennung zwischen den Links einfügen. Dazu kann ein Größer-als-Zeichen herhalten (maskiert dann >)

<div id="breadcrumbs">
<a href="/index.htm">Startseite</a> 
>
<a href="/eben1.htm">Ebene 1</a>
>
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>
</div>

Das Designen der Breadcrumbs wird nun über CSS vorgenommen, z.B. kann hier mit gutem Gewissen die Unterstreichung herausgenommen werden (und beim Überfahren mit der Maus wieder eingeblendet werden).

#breadcrumbs a {
    text-decoration:none;
}

#breadcrumbs a:hover {
    text-decoration:underline;
}

So – und nun viel Spaß beim Erstellen der Breadcrumbs-Navigation.