HMENU-Objekt in TypoScript

Damit Sie über Ihre Website navigieren können, benötigen Sie eine Navigation. Hierfür gibt es in TypoScript auch ein Objekt, das HMENU.

In Typo3 CMS basieren alle Menüs auf dem Objekt HMENU. Der Buchstabe H steht für hierarchisch und macht deutlich, dass es eine baumartige Menüstruktur verwendet wird.

Sie können mit dem HMENU die Home Seite und Unterseiten gesammelt in einem COA-Objekt als Menüführung ausgeben.

Um das Menü befüllen zu können, benötigen Sie zunächst einmal entsprechende Seiten. Dazu können Sie das Modul Funktionen verwenden. Wählen dann die Seite Home bzw. die Seite mit dem Einstieg in die Website. Im Assistenz-Menü können Sie dann oben im Select-Feld „Mehrere Seiten erzeugen“ auswählen. Hier können Sie dann die gewünschten Seiten in Typo3 CMS anlegen, z. B. Über uns, Leistungen, Team, Kontakt und Impressum.

mehrere Seiten anlegen in typo3

Nachdem Sie die Seiten in Typo3 CMS angelegt haben, erscheinen diese unterhalb der Home Seite.

Wechseln Sie dann in das Template Modul, klicken Sie auf die Einstiegsseite bzw. die Home Seite und öffnen Sie dann Setup.

Im Folgenden finden Sie ein Beispiel, wie ein Menü in Typo3 CMS mit TypoScript angelegt werden kann.

obj.menu=HMENU
obj.menu{
wrap=<ul>|</ul>

1 =TMENU
1 {
NO=1
NO.wrapItemAndSub=<li>|</li>
ACT=1
ACT.wrapItemAndSub=<liclass=„active“>|</li>
CUR=1
CUR.wrapItemAndSub=<liclass=„current“>|</li>
}
}
page=PAGE
page.10 <obj.menu

menü frontend typo3

Zunächst wird im vorstehenden Beispiel ein neues Objekt für die Menüführung mit

obj.menu=HMENU

erzeugt. Das HMENU gibt die Art und Weise des Menüs an. Standardmäßig steigt das Menü unterhalb der Home Seite bzw. der Einstiegsseite der Website ein. Danach wird ein wrap für die unordered list (ul) Menüführung eingesetzt.

wrap=<ul>|</ul>

Mit wrap umschließen Sie die Menüpunkte mit dem UL-Tag. Als nächstes wird die erste Ebene der Menüführung als TMENU definiert.

1 =TMENU

TMENU wird später nochmal genauer erklärt.

Danach werden die Zustände des Menüs definiert. Es gibt den Normal-Zustand (NO), den Active-Zustand (ACT) und den Current-Zustand (CUR).

1 =TMENU
1 {
NO=1
ACT=1
CUR=1  }

Die Menü-Zustände werden später nochmal genauer erklärt.

Damit man die Zustände im Frontend auseinanderhalten kann, werden noch folgende Konfigurationen benötigt. Für die A-Tags, die generiert werden, werden <li>’s gelegt. Für den normalen Zustand wird keine CSS-Klasse vergeben. Für den aktiven Zustand wird die CSS-Klasse active vergeben. Und für den aktuellen Zustand wird die CSS-Klasse current vergeben.

1 =TMENU
1 {
NO=1
NO.wrapItemAndSub=<li>|</li>
ACT=1
ACT.wrapItemAndSub=<liclass="active">|</li>
CUR=1
CUR.wrapItemAndSub=<liclass="current">|</li>
}

Als letztes wird das menu-Objekt an das PAGE-Objekt an der Stelle 10 vergeben.

page=PAGE
page.10<obj.menu

Jetzt fehlt noch die Einstiegseite Home in der Menüleiste. Aktuell ist es nicht möglich auf die Home-Seite zu kommen. Dafür muss das menu-Objekt etwas angepasst werden.

Ohne spezielle Angabe werden die Menüpunkte unterhalb der Root-Seite bzw. der Einstiegsseite Home ausgegeben. Wenn Sie die Seite Home ausgeben möchten, besteht die Möglichkeit mit

special=list

das Menü zu einem Spezialmenü zu definieren. Mit

special.value

können Sie eine Liste von ID’s, also der Website ID’s vergeben. Der Eintrag

special.value = 1

würde z.B. für die Seite Home stehen.

Folgendes Beispiel gibt aber mit dem Spezialmenü nur noch die Home Seite aus.

obj.menu=HMENU
obj.menu{
wrap=<ul>|</ul>
special=list
special.value=1

1 =TMENU
1 {
NO=1
NO.wrapItemAndSub=<li>|</li>
ACT=1
ACT.wrapItemAndSub=<liclass=„active“>|</li>
CUR=1
CUR.wrapItemAndSub=<liclass=„current“>|</li>
}
}
page=PAGE
page.10 <obj.menu

Hier bietet es sich an für die Home Seite ein eigenes Objekt zu machen und für die Folgeseiten ebenfalls. Mit dem Content Object Array (COA) können Sie dann die zwei Objekte wieder zu einem Objekt zusammenfassen.

obj.menu=COA
obj.menu{
wrap=<ul>|</ul>

10 =HMENU
10 {
special=list
special.value=1
1=TMENU
1{
NO=1
NO.wrapItemAndSub=<li>|</li>
ACT=1
ACT.wrapItemAndSub=<liclass=„active“>|</li>
CUR=1
CUR.wrapItemAndSub=<liclass=„current“>|</li>
}
}

20 =HMENU
20 {
1=TMENU
1{
NO=1
NO.wrapItemAndSub=<li>|</li>
ACT=1
ACT.wrapItemAndSub=<liclass=„active“>|</li>
CUR=1
CUR.wrapItemAndSub=<liclass=„current“>|</li>
}
}
}

page=PAGE
page.10 <obj.menu

menü komplett

TMENU in TypoScript

Das TMENU-Objekt ist ein textbasiertes Menü, das wohl am meisten verwendete Menü. Es gibt noch das GMENU, das Graphical Menu. In der Praxis kommt das GMENU aber kaum vor.

Menü-Zustände

NO (Normal)

Der Normal-Zustand ist immer dann, wenn die Seite gerade nicht angeklickt worden ist oder Sie sich nicht auf einer Unterseite befinden.

ACT (Active)

Der Active-Zustand ist immer dann, wenn Sie sich auf einer Unterseite befinden. Befindet sich ein User z. B. in Produkte -> Produkt X -> Beschreibung, so ist nicht nur Beschreibung aktiv, sondern auch Produkt X und Produkt.

CUR (Current)

Den Status Current hat immer nur eine Seite. Die Current Seite ist die Seite, die gerade angeklickt wurde und dargestellt wird.

 

 

Haben Sie Fragen oder Probleme bei der Webentwicklung mit Typo3 CMS und dem Anlegen eines Menüs mit TypoScript? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.