Menüs
Um mit Typoscript Menüs zu erstellen, verwenden wir die Objekte “HMENU” und “TMENU”. Bevor wir damit arbeiten können, brauchen wir in unserem Backend ein paar Seiten:
Das Objekt “HMENU” wird für die generelle Definition des Münus verwendet, für die einzelnen Menüebenen benötigen wir das Objekt “TMENU”. Im simpelsten Fall sieht das folgendermaßen aus:
page.2 = HMENU
page.2 {
1 = TMENU
}
Im Moment ist das Ganze noch nicht sehr ansehnlich, aber im Frontend können wir folgendes sehen:
Um die Optik ein wenig zu verbessern, weisen wir unseren Elementen CSS-Klassen zu:
page.2 = HMENU
page.2.wrap = <div class="menue">|</div>
page.2 {
1 = TMENU
1 {
NO {
wrapItemAndSub = <div class="menueitem">|</div>
}
}
}
In jedem TMENU müssen wir in irgendeiner Weise definieren, was auf den Normalzustand zutrifft, wir brauchen also zwingend das “NO” Attribut. Ohne “NO” würden beispielsweise unsere Wraps nicht übernommen werden. Mit dem Attribut “wrapItemAndSub” legen wir ein DIV um jeden Menüpunkt (und gleichzeitig um alle darunter verketteten Submenü-Elemente, falls vorhanden).
Hier noch das aktualisierte CSS-File:
Unser Frontend schaut nun schon ein wenig besser aus:
Nun wollen wir, damit wir wissen, auf welcher Seite wir uns gerade befinden, im Menü markieren, welche Seite die aktuell aktive ist. Vorhin haben wir das Attribut “NO” (für “NORMAL”) kennengelernt, das quasi den Default-Zustand definiert. Mit “CUR” (für “CURRENT”) können wir den Menüpunkt der aktuell aktiven Seite ansprechen. Wir möchten, dass dieser in einem giftigen Grün erscheint. Hierzu definieren wir uns eine neue CSS-Klasse:
page.2 = HMENU
page.2.wrap = <div class="menue">|</div>
page.2 {
1 = TMENU
1 {
NO {
wrapItemAndSub = <div class="menueitem">|</div>
}
CUR = 1
CUR {
wrapItemAndSub = <div class="menueitem activeitem">|</div>
}
}
}
Mit “CUR = 1” wird ausgedrückt, dass ein “Current-Status” existiert. Das geschieht bei NO (und nur bei NO) automatisch mit, indem NO irgendetwas zugewiesen wird. CUR und andere TMENU Item States müssen zuerst aktiviert, also auf 1 gesetzt werden. Der Rest funktioniert analog zum NO-Attribut. So sieht unser Frontend aus, wenn “Seite 2” die aktive ist:
Unser nächster Schritt ist, unserem Menü eine Unterebene (via Dropdown) zu geben. Hierzu müssen wir ein paar Unterseiten erstellen:
Im nächsten Schritt definieren wir die für das Dropdown-Menü notwendigen CSS-Klassen:
.hintergrund1{
background-color: #dddddd;
}
.hintergrund2{
background-color: #bbbbbb;
}
.menue{
padding: 1vw;
background-color: #dddddd;
margin-bottom: 5vh;
height: 3vh;
}
.menueitem{
width: 5vw;
margin-right: 1vw;
float: left;
position: relative;
display: inline-block;
}
.menueitem a{
text-decoration: none;
font-size: 1.2em;
font-weight: 600;
color: #000000;
}
.menueitem a:hover{
color: #555555;
}
.activeitem a{
color: #00ff00;
}
.dropdown{
display: none;
position: absolute;
border: 1px solid grey;
z-index: 10;
padding: 2vh;
background-color: #eeeeee;
width: 10vw;
}
.menueitem:hover .dropdown{
display: block;
}
Bei der Klasse “menueitem” müssen wir die relative Positionierung und “display: inline-block;” hinzufügen, damit das Dropdown dann an der richtigen Stelle angezeigt wird. Mit der Klasse “dropdown” stylen wir den Bereich der Dropdown-Ebene. Wichtig hierbei: Im Normalzustand wird diese nicht angezeigt (display: none;), erst wenn wir über den zugehörigen Menüpunkt in der Hauptebene hovern, wird die Unterebene angezeigt (".menueitem:hover .dropdown").
Nun können wir unser Typoscript anpassen:
page.2 = HMENU
page.2.wrap = <div class="menue">|</div>
page.2 {
1 = TMENU
1 {
expAll = 1
NO {
wrapItemAndSub = <div class="menueitem">|</div>
}
CUR = 1
CUR {
wrapItemAndSub = <div class="menueitem activeitem">|</div>
}
}
2 = TMENU
2 {
wrap = <div class="menueitem dropdown">|</div>
NO = 1
NO {
wrapItemAndSub = <div>|</div>
}
}
}
}
Im Wesentlichen passiert hier nichts neues. Was noch erläutert werden muss, sind die Nummerierungen der TMENUs. Hier sind die Nummern nicht wie zuvor Objektreihenfolgen, sondern Menülevel. Das heißt, dass wir mit 1 die oberste Menüebende definieren, diese ist immer notwendig, damit das Menü überhaupt gerendert wird. Mit “2” definieren wir, dass es eine erste Unterebene gibt.
Unsere gesamte erste Unterebene umhüllen wir mit der Klasse “dropdown”, die DIV-Umhüllung der einzelnen Items dient in diesem Fall in erster Linie dazu, dass jeder Menüpunkt in einer eigenen Zeile erscheint. Bei Seitenbezeichnungen mit Abständen (Unterseite 1, Unterseite 2 etc.) entstehen manchmal Zeilenumbrüche an unerwünschten Stellen.
Bisher war vieles von dem, was wir hier durchgenommen haben, nicht unbedingt praxisnah und hat in erster Linie dem grundlegenden Verständnis von Typoscript gedient. Im Regelfall werden Typo3-Sites nicht mit Typoscript allein aufgebaut, sondern im Kombination mit Fluid-Templates. Daher ist es essenziell, auch ein grundlegendes Verständnis für FLUID zu gewinnen. Im nächsten Abschnitt werden wir uns genau dem widmen.
FOLLOW
