mit HMENU (special = rootline) eine Rootline erstellen

In diesem Artikel wird gezeigt, wie man ein Rootline- / Brotkrümel- / Breadcrumb Menü mit HMENU erstellt.

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äsel 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> &raquo; </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>
locallang.xml

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;
}
CSS Beispiel Code