Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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> 
&gt;
<a href="/eben1.htm">Ebene 1</a>
&gt;
<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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe