Typoscript Naviagation 

Seitennavigation im TYPO3 Template

07.01.2017 1437

TYPO3 Navigationen mit Typoscript

Eine Webseite beinhaltet in der Regel eine handvoll unterschiedlicher Menüarten: • Hauptmenu mit Unterseiten
• Second Menu das z.B. in der Sidebar plaziert werden kann und einen tieferen Einstiegspunkt hat.
• Infomenu,  das Seiten aus einem Systemordner rendert (zum Beidpiel im Footer)
• Breadcrumb
• Language Menu, Sprachauswahl für mehrsprachige Seiten Für eine besser Übersicht legen wir im Verzeichnis my_extension/Configuration/Typoscript/ einen neuen Ordner "Menu" an und erstellen dort für jedes benötigte Menü eine Datei, zum Beispiel mainmenu.ts. Um die Einbindung ins Tempate zu prüfen, reicht dort folgender Eintrag: 
lib.navigation.main = TEXT
lib.navigation.main.value = Hauptmenü
Später ersetzen wir die lib durch den eigentlichen Menüaufbau, im Augenblick wollen wir nur die Einbindung prüfen. Das einzelnen Menüdateien im Ordner "Menu" binden wir mit folgendem Code in unser Setup ein: 
<INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/mainmenu.ts">
<INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/secondmenu.ts">
....
In unserem Partial Header.html können wir nun mit dem cObject ViewHelper das Menü ausgeben: 
<f:cObject typoscriptObjectPath="lib.navigation.main" />
Nach dem leeren aller Caches wird uns nun das Wort "Hauptmenü" im Frontend ausgegeben. Falls die Ausgabe leer bleibt, prüft bitte euere angegebenen Seitenpfade, Ordner- und Dateinamen. Als nächstes ersetzten wir die lib.navigation.xxx durch die eigentlichen Typoscript Menüs:

Hauptmenü 

lib.navigation.main = HMENU
    1 = TMENU
    1 {
        wrap = <ul class="nav navbar-nav">|</ul>
        expAll = 1
           
        NO {
            ATagTitle.field = subtitle //  title
            ATagBeforeWrap = 1
            linkWrap = |
            wrapItemAndSub = <li>|</li>      
        }
        ACT < .NO
        ACT.wrapItemAndSub = <li class="active">|</li>
            
        CUR < .ACT

        IFSUB < .NO
        IFSUB {
            doNotLinkIt = 1
            allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret hidden-md hidden-lg"></b></a>
            wrapItemAndSub = <li class="dropdown">|</li>
        }
        ACTIFSUB < .IFSUB
        ACTIFSUB {
            wrapItemAndSub = <li class="active dropdown">|</li>
        }
            CURIFSUB < .ACTIFSUB
    }

    2 < .1
    2 {
        wrap =  <ul class="dropdown-menu">|</ul>
        IFSUB >
        ACTIFSUB.wrap = <ul class="dropdown-menu open">|</ul>
        CURIFSUB >
    }
}
Typoscript Menüs im Schnelldurchgang: 
Mit der Anweisung HMENU sagt ihr dem System das ihr ein cObject vom Typ Menü (hierarchicalmenu) anlegen wollt. 10.1 ist die erste Menüebene, deklariert als TMENU (textmenu). Mit wrap umschließt ihr das komplette Menü, expAll =1 bedeutet das die Unterseiten berücksichtigt werden.
Nun kommen die verschiedenen Menüzustände: NO: normal, ACT: active (hover), CUR: Seite wird grade angezeigt, IFSUB: Seite hat Unterseiten, ACTIVSUB: Unterseite des Menüpunktes wird grade angezeigt, CURIFSUB: Seite wird angezeigt und hat Unterseiten. Dazu kommen noch zig weitere Eigenschaften die gesetzt werden können, für unser Menü sollte das reichen. Mit 2 < .1 vererbt ihr die ganzen Eigenschaften auf die zweite Menüebene, alles was ihr ändern wollt wird dann inder 2 { ... } Klammer überschrieben. Wie in der Einleitung beschrieben müsst ihr diese Datei im Verzeichnis my_extension/Configuration/Typoscript/Menu/ speichern und in eurem Setup über <INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/dateiname.ts"> einbinden. Im Template reicht dann ein einfaches 
<f:cObject typoscriptObjectPath="lib.navigation.main" />
und euer Menü wird gerendert.

Typoscript Untermenü (second Menu)

Submenüs zeigen die Unterseiten eines Hauptmenüpunktes an und werden meist in der Sidebar eingebaut. Der wesentliche Unterschied zu der Hauptnaviagtion ist der Eintrag entryLevel. Mit dem Wert wird definiert in welcher Ebene des Seitenbaums das Menü startet. 
lib.navigation.sub  = HMENU
lib.navigation.sub  {
    entryLevel = 1

    1 = TMENU
    1 {
        wrap = <ul class="submenu">|</ul>

        NO {
            wrapItemAndSub = <li>|</li>
        }
        ACT < .NO
        ACT.wrapItemAndSub = <li class="active">|</li>
        
        CUR < .ACT   
    }
    2 < .1
}

Menü mit Seiten aus einem Systemordner (Info Menü)

Diese Art des Menüs wird meist im Seitenkopf oder Footer als Meta Menü für Impressum, Kontakt usw. verwendet. Dabei liegen die Seiten die ausgegeben werden sollen in einem Systemordner oder sind Unterseiten einer Seite. Das Schlüsselwort für diese Art von TYposcript Menüs ist im HMENU special = directory, als value wird die PID der Seite angegeben die die auszugebenen Seiten enthält. 
lib.navigation.meta  = HMENU
lib.navigation.meta  {
    special = directory
    special.value = 1234

    1 = TMENU
    1 {
        wrap = <ul class="submenu">|</ul>

        NO {
            wrapItemAndSub = <li>|</li>
        }
        ACT < .NO
        ACT.wrapItemAndSub = <li class="active">|</li>
        
        CUR < .ACT   
    }
}

Breadcrump Navigation

Für ein Breadcrump Menü brauchen wir nur den Pfad zur Rootseite (oder einem anderem EntryLevel), alle anderen Unterseiten der Ebene bleiben im Vergleich zu einem klassischem Seitenmenü unberücksichtigt. Breadcrump: home/meineErsteEbene/meineUnterseite Dazu gibt es im Typoscript HMENU die Eigenschaft special = rootline. Über die Propertiy special.range wird der Einstiegspunkt und das Ende des Menüs bestimmt. Das folgende Beispiel enthält die Rootseite wie auch die aktuelle Seite: special.range = 0|-1
Um beim Seitenlevel 1 zu beginnen und die aktuelle Seite auszuschließen kann der Wert auf special.range = 1|-2 gesetzt werden. 
lib.breadcrumb = HMENU
lib.breadcrumb {
    special = rootline
    special.range = 0|-1
    
    1 = TMENU
    1 {
        wrap =   <ol class="breadcrumb"> | </ol>
        NO.linkWrap =  <li>| </li>
        CUR = 1
        CUR.linkWrap =  <li class="active">|</li> 
        CUR.doNotLinkIt = 1
    }
}