Rootline
mit HMENU (special = rootline) eine Rootline erstellen
In diesem Artikel wird gezeigt, wie man ein Rootline- / Brotkrümel- / Breadcrumb Menü mit HMENU erstellt.
Inhalt
Rootline oder Brotkrümel Navigation?
Kürzlich wurde mir die Frage gestellt: Was ist eine Rootline Navigation? Ist es dasselbe wie eine Brotkrümel Navigation? Früher hätte ich sofort JA gesagt, aber nach einigen Diskussionen bin ich nun der Meinung dass die Antwort NEIN heisst.
Eine kurze Begründung: Der Brotkrümel-Pfad kommt bekanntlich von Hänsel und Gretel welche Kreuz und Quer durch den Wald liefen und dabei Brotkrümel fallen gelassen haben damit sie nach Hause finden. Es bestand also die Möglichkeit, dass sie an gewissen Orten mehrmals vorbeikamen, es jedoch nicht merkten.
Eine Brotkrümel Navigation müsste sich also merken auf welchem Weg der Besucher auf die Seite kam um Ihm den Weg nach Home zeigen zu können. Weil ein Benutzer auf einer Webseite ebenfalls Kreuz und Quer durch die Seiten klicken kann (oder direkt von einer Suchmaschine auf die Seite kommt) müsste diese Navigation also eigentlich etwas anderes darstellen.
Die hier erstellte Navigation macht das nicht, sie zeigt immer den direkten Weg in der Seitenstruktur nach Home.
Typoscript Code (einfach)
# rootline grund aufbau, einfachste art
lib.menu.rootline = HMENU
lib.menu.rootline {
special = rootline
# damit die seite auch angezeigt wird, falls diese im menü versteckt ist
includeNotInMenu = 1
1 = TMENU
1 {
noBlur = 1
NO {
allWrap = |*| | <span> » </span> |*| |
}
}
}
# Varianten
# -----------------------------------
# ohne home, level 0 nicht anzeigen
lib.menu.rootline.special.range = 1|-1
# nur 4 level zurück darstellen
lib.menu.rootline.special.range = -4|-1
# letzter navigations punkt nicht verlinkt
lib.menu.rootline.1.NO.doNotLinkIt = |*| 0 |*| 1
Typoscript Code (als UL Element)
# Rootline ( breadcrumb ) Navigation mit HMENU
# code by thefox.ch
lib.menu.rootline = COA
lib.menu.rootline {
# load rootline menu data
1 = LOAD_REGISTER
1 {
label_title.data = LLL:pfad-zu-xml-datei/locallang.xml:menu.rootline.title
label_prefix.data = LLL:pfad-zu-xml-datei/locallang.xml:menu.rootline.nav_prefix
}
# title
10 = TEXT
10 {
insertData = 1
value (
<h2 class="hidden">{register:label_title}</h2>
)
}
# navigation
20 = HMENU
20 {
stdWrap.dataWrap (
<ul id="rootline" class="rootline">
<li class="label">{register:label_prefix}</li>
|
</ul>
)
special = rootline
includeNotInMenu = 1
1 = TMENU
1 {
noBlur = 1
NO {
allWrap = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
stdWrap {
crop = 25 | ... | 1
}
ATagTitle {
field = title
htmlSpecialChars = 1
}
}
CUR < .NO
CUR = 1
CUR {
#doNotLinkIt = 1
allWrap = <li class="cur first">|</li>|*|<li class="cur">|</li>|*|<li class="cur last">|</li>
stdWrap {
crop = 100 | ... | 1
}
ATagParams = class="cur"
}
}
}
}
locallang.xml
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
<type>module</type>
<description>Languages labels template</description>
</meta>
<data type="array">
<languageKey index="default" type="array">
<label index="menu.rootline.title">Rootline</label>
<label index="menu.rootline.nav_prefix">You are here</label>
</languageKey>
<languageKey index="de" type="array">
<label index="menu.rootline.title">Rootline</label>
<label index="menu.rootline.nav_prefix">Sie sind hier</label>
</languageKey>
</data>
</T3locallang>
CSS Code
ul.rootline {
margin: 5px 0;
padding: 0;
list-style-type: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
*+html ul.rootline { zoom: 1; }
ul.rootline li {
float: left;
padding: 2px 13px 2px 3px;
font-size: 0.7em;
color: #bbbbbb;
}
ul.rootline li a {
padding: 0 2px;
text-decoration: none;
color: #bbbbbb;
}
ul.rootline li a:hover {
color: #333333;
}
ul.rootline li.label {
padding-left: 0;
font-style: italic;
}