Breadcrumb - Layout
Brotkrümelnavigation (Breadcrumb) bezeichnet man eine Leiste zur Navigation, die dem Besucher den Pfad der aktuellen Seite anzeigt.
Bis 2013
Die MSXFAQ hat ganz lange ein klassisches Layout für die Anzeige der aktuellen Seitenposition in der Struktur verwendet:
Was andere machen
Auf vielen anderen Seiten habe ich ein Layout gesehen., das ich "schöner" fand und technisch sogar einfacher aufgebaut wurde, z.B. auf
- Google
- Spiegel
- Gira
http://www.gira.de/service/download/index.html?id=2546 (Sep 2013)
Eigene Umsetzung
Die Struktur meiner Seite ist vorgegeben (Siehe Struktur 2013) und kann ich per VBA-Skripte erstellen. Die Formatierung erfolgt per CSS-Formate. Bleibt die Frage des "wie" und da habe ich mir die Umsetzungen verschiedener Seiten anschaut. Schließlich sollte die Navigation auch gut aussehen, wenn z.B. das Stylesheet nicht geladen wird oder der Client das nicht kann.
Ich habe mich dann gegen eine "Aufzählung" mit ul/Li-Elementen entschieden und einfach den Text wie bisher beibehalten. per Stylesheet habe ich dann aber doch dafür gesorgt, dass ich "Bereiche" mit Pfeilen habe.
Im HTML-Code ist das dann weiterhin wie folgt sichtbar. nur die ">>"-Zeichen muss ich natürlich entfernen.
Über das DIV-Tag kann ich die Formatierung ganz einfach auf den Bereich beschränken und der Rest machen dann zwei CSS-Kennzeichnungen.
#breadcrumb {
font-size: 11px;
max-width: 820px;
height: 26px;
line-height: 26px;
padding-left:5px;
overflow: hidden;
margin-top: 4px;
display:block;
margin-bottom: 20px;
border-bottom: 1px dashed #ADACA7;
border-top: 1px dashed #ADACA7;
background: #F4F4F3;
}
#breadcrumb a {
line-height: 26px;
padding-right: 14px;
margin-right: 7px;
float: left;
display: block;
background-image: URL("images/css/breadcrumbarrow.gif");
background-attachment: scroll;
background-repeat: no-repeat;
background-position:right top;
}
Und das ganze sieht dann so aus
Breadcrumb und Google
Anfang 2016 habe ich dann auf der Google Developer Seite gesehen, dass Google auch den Pfad eines Dokuments "verstehen" kann, wenn man als Autor eine gewisse Struktur versteckt hinterlegt.
- Google Developers - Structured Data -
Breadcrumbs
https://developers.google.com/structured-data/breadcrumbs - Structured Data Testing Tool
https://developers.google.com/structured-data/testing-tool/
Analog zu den Breadcrumbs am Anfang muss man irgendwo in der Seite einfach ein Stück Code einbauen, welches dann von Google auch interpretiert wird.
Diese Funktion habe ich noch nicht eingebaut
Weitere Links
- http://de.wikipedia.org/wiki/Brotkr%C3%BCmelnavigation
- Breadcrumb-Navigation mit
PHP
http://www.drweb.de/magazin/breadcrumb-navigation-mit-php/ - Breadcrumb Navigation
Increasingly useful
http://www.nngroup.com/articles/breadcrumb-navigation-useful/ - How to: Breadcrumb function für WordPress
http://www.catswhocode.com/blog/how-to-breadcrumb-function-for-wordpress