Das vollständige TypoScript TMENU zum Kopieren gibt es hier.

Im SetUp Bereich des Typo Templates wird das Menü definiert. Im Hinblick auf barrierefreie Webseiten bietet sich ein Textmenü an, das z.B. von Suchmaschinen und Screenreadern problemlos gelesen werden kann.

Im ersten TypoScript Block initialisieren wir das Menü mit der Anweisung in Zeile 1.

temp.menuLeft = HMENU

Vor dem Gleichheitszeichen steht ein frei wählbarer Name für unser Menü, z.B. "menuLeft", der ergänzt wird durch das vorangestellte "temp." und so eine temporär gültige Variable ergibt, die "temp.menuLeft" heißt.

Dieser Variablen wird nun ein Wert zugewiesen, in unserem Fall "HMENU", was soviel bedeutet wie hierarchiches Menu.

Ein hierarchiches Menü ist nichts anderes als ein Menü mit bestimmten Ebenen, die wie eine Baumstruktur verzweigt sind. Die meisten Menüs aller Internetseiten kann man als hierarchiche Menüs bezeichnen.

Im nächsten TypoScript Block wird unser "temp.menuLeft" weiteren Definitionen zugeordnet. Mit directory sagen wir dem Menü, das es nur die Seiten berücksichtigen soll, die unterhalb einer bestimmten Seite angeordnet sind. Mit value wird die PID Page ID der Seite angegeben, die als Ausgangsseite unseres Menüs dienen soll. In unserem Fall erhalten wir mit den bisherigen Definitionen ein HMENU, das alle Seiten berücksichtigt, die unterhalb der Seite mit der PID 87 angeordnet sind.

# Start eines Menüs (HMENU), das alle Seiten erfasst, 
# die unterhalb der Seite mit der PID 87 angeordnet sind
 
temp.menuLeft = HMENU
temp.menuLeft.special = directory
temp.menuLeft.special.value = 87

Wie allerdings die erste Menüebene dargestellt werden soll, haben wir unserem TypoScript Template bisher noch nicht mitgeteilt. Wenn wir also nur den bisherigen TypoScript Block in unserem Typo Template abspeichern würden, würden wir noch kein Menü angezeigt bekommen. Wir müssen nun definieren, wie die erste Menüebene aussehen soll.

Mit dem folgenden Block definieren wir in der ersten Zeile ein Text-Menü TMENU. In der zweiten Zeile definieren wir mit wrap und dem Pipe-Symbol | ob um das gesamte Menü etwas drumherum geschrieben werden soll. Die Pipe steht hier als Platzhalter für das gesamte Menü. In userem Fall wird vor und hinter dem Menü kein besonderer HTML-Code erzeugt, da wir hier nichts definiert haben. Mit den folgenden beiden Zeilen definieren wir den normalen NO Zustand eines Menüpunktes, d.h.: Wie soll der Menüpunkt aussehen, wenn er nicht angeklickt ist? Auch hier wird in unserem Beispiel vor und hinter jedem einzelnen Menüpunkt nichts definiert. Mit ATagParams haben wir die Möglichkeit, jedem Menüpunkt eine css Klasse zuzuweisen, so daß wir hier eine Formatierungsmöglichkeit erhalten.

# Definition der ersten Menü-Ebene
# TMENU bedeutet Text-Menü

temp.menuLeft.1 = TMENU
temp.menuLeft.1.wrap = |
temp.menuLeft.1.NO.allWrap = |
temp.menuLeft.1.NO.ATagParams = class="level1-no"

Der nächste Code<Block ist nicht zwingend notwendig, ermöglicht uns aber, einem <i>aktiven ACT Menüpunkt eine andere css Klasse und damit ein anderes Aussehen zu zuzuweisen. Zunächst wird alles, was für den Menüpunkt im normalen NO Zustand gilt, auf den aktiven ACT Zustand übetragen. Das geschieht in der ersten Zeile. Mit der zweiten Zeile wird definiert, das wir den Zustand ACT tatsächlich nutzen wollen. Und in der letzten Zeile schreiben wir die neue css Klasse für den Zustand ACT.

temp.menuLeft.1.ACT < temp.menuLeft.1.NO
temp.menuLeft.1.ACT = 1
temp.menuLeft.1.ACT.ATagParams = class="level1-act"

Die erste Menüebene ist damit vollständig definiert. Für die zweite Menüebene definieren wir analog zur ersten Ebene folgenden Code-Block.

temp.menuLeft.2 = TMENU
temp.menuLeft.2.wrap =  |
temp.menuLeft.2.NO.allWrap = |
temp.menuLeft.2.NO.ATagParams = class="level2-no"

temp.menuLeft.2.ACT < temp.menuLeft.2.NO
temp.menuLeft.2.ACT = 1
temp.menuLeft.2.ACT.ATagParams = class="level2-act"