Das Dokument beschreibt die Erstellung von Menüs mit TypoScript, einschließlich dynamischer Änderungen wie das automatische Ausblenden von gelöschten oder versteckten Seiten. Es erklärt die Struktur und Flexibilität von hierarchischen Menüs und enthält Beispiele für die Formatierung von Menüelementen, deren Darstellung und die Anpassung an Benutzerberechtigungen. Zusätzlich werden spezielle Eigenschaften wie Breadcrumbs und grafische Menüs behandelt.

1. Menüs mit TypoScript

2. Anforderungen Dynamische Änderungen Geänderte Seitentitel automatisch im Menü Gelöschte und versteckte Seiten automatisch ausgeblendet Seiten abhängig von der Berechtigung des Users Sauberer HTML-Code Darstellung i.d.R. als ungeordnete Liste Beliebiger HTML-Code möglich Darstellung beliebig vieler Elemente Flexibilität

3. Einfaches Menue # Menü wird definiert # HMENU => hierarchisches Menü, es kann mehrere Ebenen geben temp.topnav = HMENU temp.topnav { # Erste Ebene soll ein Textmenü sein 1 = TMENU 1 { # Der normale Zustand soll angezeigt werden NO = 1 } }

4. Menue als ungeordnete Liste # Menü wird definiert # HMENU => hierarchisches Menü, es kann mehrere Ebenen geben temp.topnav = HMENU temp.topnav { # Erste Ebene soll ein Textmenü sein 1 = TMENU 1 { # Der normale Zustand soll angezeigt werden NO = 1 # als Listenelement wrappen NO.wrapItemAndSub = <li>|</li> } # Ganz außenrum ein <ul> wrap = <ul>|</ul> }

5. Menue als ungeordnete Liste Ergebnis:

6. Den aktiven Menuepunkt hervorheben temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> # Der aktive Menübutton soll eine id &quot;act&quot; bekommen # Aktiven Zustand einschalten ACT = 1 # Der aktive Zustand erhält einen anderen Wrap ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li> } wrap = <ul>|</ul> }

7. Den aktiven Menuepunkt hervorheben Ergebnis:

8. Vereinfachung des Codes temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> # Für ACT die gleichen Einstellungen verwenden wie # für NO ACT < .NO } wrap = <ul>|</ul> }

9. Title im A-Tag setzen temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> # Title für den A-Tag setzen NO.ATagTitle.field = abstract // nav_title // title # Für ACT die gleichen Einstellungen verwenden wie für NO # überschreiben von wrapItemAndSub ACT < .NO ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li> } wrap = <ul>|</ul> }

10. Title im A-Tag setzen Ergebnis:

11. Verschiedene Zustaende von Menuepunkten NO Standardzustand CUR dieser Menüpunkt wird gerade angezeigt ACT dieser Menüpunkt liegt innerhalb der aktuellen Rootline IFSUB / ACTIFSUB / CURIFSUB dieser Menüpunkt hat Unterpunkte Weitere Zustände sind in der TSRef zu finden: http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2531260

12. Option-Split temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 # Bestimmte Elemente anders formatieren # Bereiche sind durch |*| getrennt # Beginn, Mitte, Ende NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> |*| <li>|</li> |*| <li class=&quot;last&quot;>|</li> } wrap = <ul>|</ul> }

13. Option-Split Ergebnis:

14. Option-Split II temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 # Bestimmte Elemente anders formatieren # Bereiche sind durch || einzeln voneinander getrennt NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> || <li class=&quot;second&quot;>|</li> || <li class=&quot;third&quot;>|</li> || <li class=&quot;fourth&quot;>|</li> || <li class=&quot;fifth&quot;>|</li> } wrap = <ul>|</ul> }

15. Option-Split II Ergebnis:

16. Eine zweite Menuebene temp.topnav = HMENU temp.topnav { 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> } # Zweite Menüebene mit allen Eigenschaften wie die erste 2 < .1 # Braucht nochmal ein ul als Wrap, sobald Unterpunkte # vorhanden sind 2.stdWrap.wrap = <ul>|</ul> 2.stdWrap.required = 1 wrap = <ul>|</ul> }

17. Eine zweite Menuebene Ergebnis:

18. Weitere Informationen TMENU Eigenschaften für ganze Menüebenen http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828 TMENUITEM Eigenschaften für einzelne Menüpunkte http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828

19. Besonderheiten: Definierter Startpunkt temp.topnav = HMENU temp.topnav { # Menü ab einem bestimmten Startpunkt # z.B. bei Footer- oder Service-Navigationen häufig eingesetzt special = directory special.value = {$topnavStartingPoint} 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> } wrap = <ul>|</ul> }

20. Besonderheiten: Erst ab X. Ebene anzeigen temp.topnav = HMENU temp.topnav { # Das Menü wird erst ab der ersten Ebene angezeigt entryLevel = 1 1 = TMENU 1 { NO = 1 NO.wrapItemAndSub = <li>|</li> } wrap = <ul>|</ul> }

21. Besonderheiten: Breadcrumb temp.topnav = HMENU temp.topnav { # typ &quot;rootline&quot; zeigt den Pfad von der aktuellen Seite bis # zur Root-Seite an special = rootline # 1. bis 8. Ebene special.range = 1 | 8 1 = TMENU 1 { NO = 1 # Durch Pfeile (&raquo;) voneinander getrennt # Mit Option Split erreichen wir, dass nach dem letzten # Menüpunkt kein Pfeil mehr kommt NO.wrapItemAndSub = |&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*| |&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*| | } wrap = <div id=&quot;breadcrumb&quot;>|</div> }

22. Besonderheiten: Breadcrumb Ergebnis:

23. Graphische Menues: Das Ziel Unser Ziel: HTML: <ul> <li> <a style=&quot;width: 123px; background-image: url(…);&quot;> Menüpunkt1 </a> </li> </ul> CSS: ul li a { display: block; text-indent: -999em; }

24. Graphische Menues: Das Grundgeruest temp.navigation = HMENU temp.navigation { 1 = TMENU 1 { wrap = <ul>|</ul> NO = 1 NO { wrapItemAndSub = <li>|</li> ATagParams.cObject = IMG_RESOURCE ATagParams.cObject { # Hierhin das Kernstück: Das Zusammenbauen # der Grafik, siehe Folge-Seite } } } stdWrap.wrap = <div id=&quot;navigation&quot;>|</div> }

25. Graphische Menues: Das Kernstueck file = GIFBUILDER file { format = png XY = [20.w]+20,50 20 = TEXT 20 { text.field = title fontSize = 20 fontFile = fileadmin/templates/fonts/arioso.ttf } } # in {TSFE:lastImgResourceInfo|0}px sind alle Daten des zuletzt # erstellten Bildes verfügbar, also auch die Breite stdWrap.dataWrap ( style=&quot;display: block; text-indent: -999em; width: {TSFE:lastImgResourceInfo|0}px ; background-image: url('/|');&quot; )

26. Graphische Menues: Details Details hierzu in Kasper's Podcast: Tips'n'Tricks: ttmenu vom 9. Sep 2008 http://typo3.org/podcasts/kasper/ ?tx_podkast_pi1[pointer]=3&cHash=42a1755d2d

27. In2 code. Vielen Dank www.in2code.de Stefan Busemann Tina Gasteiger Alex Kellner