4.2| Menüs, Untermenüs und Navigation erstellen – Typo3 Fluid

Ein sehr wichtiges Element welches uns in unserem Typo3 Fluid Template nun noch fehlt ist ein Menü. In diesem Beitrag erkläre ich, wie man sich ein einfaches Menü anlegt.

Als erstes den Kompletten Quellcode in Typoscript zu einem Standard Menü:

nav = COA
nav {
10 = HMENU
10 {
special = directory
special.value = 75
1 = TMENU
1 {
wrap = |

expAll = 1

NO = 1
NO.wrapItemAndSub = |

CUR = 1
CUR < .NO
CUR.ATagParams = class="current-menu-ancestor"
ACT = 1
ACT < .CUR
}
}
}

Nun zur Erklärung des Typoscriptes. Als erstes leen wir ein neues COA Element an mit dem Namen „nav“. Passend zum „nav“ COA Element legen wir mit folgender Anweisung ein H-Menu Element an. Dieser Anweisung weisen wir mit folgendem Code ein Verzeichnis zu, auf welches sich das Menü in unserem Typo3 Fluid Template bezieht. In unserem Beispiel hat der Menüordner in unserem Typo3 Ordnerbaum (Backend -> Linkes Menü -> „Page“-Baum) die ID 75. Dieser erfährt man, indem man lange über den Ordner mit der Maus fährt. Es blendet sich ein Tooltip mit der ID ein.

special = directory
special.value = 75

Innerhalb dieses Elementes legen wir ein weiteres Element an. Ein T-Menu Element. Innerhalb des Elementes können wir mehrere Werte festlegen.

CUR = 1
CUR < .NO
CUR.ATagParams = class="current-menu-ancestor"

ACT = 1
ACT < .CUR

Mit dem Shortcut „CUR“ ist das „Current Menu Item“ gemeint. Mit „ACT“ das aktive Menüelement. Mit der Anweisung „CUR.ATagParams = class=“current-menu-ancestor““ weisen wir dem „Current Menu Item“ eine Klasse zu. Wir kopieren diese Anweisung auf das Active Element.
Der aktive Link hat nun die Klasse „current-menu-ancestor“. Diese können wir nun bequem via CSS gestalten.

Typo3 CMS 6.1 FLUID Template programmieren:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

Schreibe einen Kommentar