TYPO3: Menüs Mit Typoscript

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

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 } }

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> }

Menue als ungeordnete Liste Ergebnis:

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 "act" bekommen # Aktiven Zustand einschalten ACT = 1 # Der aktive Zustand erhält einen anderen Wrap ACT.wrapItemAndSub = <li id="act">|</li> } wrap = <ul>|</ul> }

Den aktiven Menuepunkt hervorheben Ergebnis:

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> }

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="act">|</li> } wrap = <ul>|</ul> }

Title im A-Tag setzen Ergebnis:

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

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="first">|</li> |*| <li>|</li> |*| <li class="last">|</li> } wrap = <ul>|</ul> }

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="first">|</li> || <li class="second">|</li> || <li class="third">|</li> || <li class="fourth">|</li> || <li class="fifth">|</li> } wrap = <ul>|</ul> }

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> }

Eine zweite Menuebene Ergebnis:

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

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> }

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> }

Besonderheiten: Breadcrumb temp.topnav = HMENU temp.topnav { # typ "rootline" 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 (») voneinander getrennt # Mit Option Split erreichen wir, dass nach dem letzten # Menüpunkt kein Pfeil mehr kommt NO.wrapItemAndSub = |  »   |*| |  »   |*| | } wrap = <div id="breadcrumb">|</div> }

Besonderheiten: Breadcrumb Ergebnis:

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

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="navigation">|</div> }

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="display: block; text-indent: -999em; width: {TSFE:lastImgResourceInfo|0}px ; background-image: url('/|');" )

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

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

TYPO3: Menüs Mit Typoscript

Ähnliche diashows

Weitere ähnliche Inhalte

TYPO3: Menüs Mit Typoscript