TYPO3 Navigation mit Bootstrap 3 und TypoScript

Responsive Navigation mit Bootstrap 3

Twitter Bootstrap hat sich als Quasi-Standard bei der Generierung responsiver Webseiten durchgesetzt. Das Framework erlaubt es mit seinem Modell von row und col nicht nur, Inhalte einer Webseite so zu verschachteln, dass sie auf einem Desktop Rechner und einem Smartphone sichtbar angezeigt werden können. Eine weitere Stärke von Bootstrap ist es auch, eine Navigation so aufzubauen, dass sie bei einer bestimmten Breite eines Browserfensters umgeschaltet wird.

Das zweite wichtige Prinzip einer Bootstrap Navigation: Wenn man in einem Menu eine Navigation mit lediglich einer Ebene hat, so werden diese Punkte als Links dargestellt. Gibt es jedoch eine zweite Ebene in einer Navigation, so schaltet man den Link zu einem Dropdown-Menu um. Beim Klick auf dieses Drop Down Menu wird dann die folgende Ebene geöffnet.

  • Der große Vorteil dieses Verhaltens:
    Wenn man auf einem Touchscreen das Menu anklickt, erscheint die folgende Ebene auf dem Bildschirm. Nutzt man einen Hover-Effekt, so öffnet sich bei einem Touchscreen zwar kurz die zweite Ebene, man ruft aber automatisch die gerade berührte Seite auf.
  • Der große Nachteil dieses Verhaltens:
    Die erste Ebene einer Navigation ist nun, zumindest über die obere Leiste, nicht mehr erreichbar. Wenn man also in einer Seite einen Überblick über die folgenden Seiten schaffen möchte, muss man diese Seite in die folgende Ebene verlagern. Zudem kann man die 1. Ebene trotzdem noch über eine Parallel-Navigation erreichen. Man sollte also einen Verweis in die Übersicht in der 2. Ebene einrichten, um duplicate Content zu vermeiden.

TypoScript Code für Bootstrap Navigation

Hier ein Code Beispiel für eine Funktion zum Aufbau einer Top Navigation mit Bootstrap 3:

 lib.navigation = COA
lib.navigation {
    wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </div> </nav>
 
    10 = COA
    10 {
        wrap = <div class="navbar-header"> | </div>
        10 = COA
        10 {
            wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button>
            10 = TEXT
            10.value = <span class="sr-only">Navigation Einklappen</span>
            20 = TEXT
            20.value = <span class="icon-bar"></span>
            21 < .20
            22 < .20
        }
    }
 
    20 = HMENU
    20 {
        wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>
        
        ## Bestimmte Seiten ausschliessen
        excludeUidList = 1, 2
         
        1 = TMENU
        1 {
            expAll = 1
                 
            NO = 1
            NO {
                ATagTitle.field = title
                wrapItemAndSub = <li>|</li>
            }
 
            CUR < .NO
            CUR {
                wrapItemAndSub = <li class="active">|</li>
            }
 
            ACT < .CUR
 
            IFSUB = 1
            IFSUB {
                ATagTitle.field = title
                ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
                linkWrap = |<b class="caret"></b>
                ATagBeforeWrap = 1
                wrapItemAndSub = <li class="dropdown">|</li>
            }
 
            ACTIFSUB < .IFSUB
            ACTIFSUB {
                wrapItemAndSub = <li class="dropdown active">|</li>
            }
 
            CURIFSUB < .ACTIFSUB
        }
 
        2 < .1
        2 {
            wrap = <ul class="dropdown-menu">|</ul>
 
            IFSUB {
                ATagTitle.field = title
                ATagParams = class="arrowbox"
                linkWrap = |
                ATagBeforeWrap = 1
                wrapItemAndSub = <li>|</li>
            }
            CURIFSUB < .IFSUB 
            ACTIFSUB < .IFSUB 
            ACTIFSUB {
                ATagParams = class="arrowbox active"
            }
        }
    }
}

Um diese Navigation lauffähig zu machen, muss die Datei mit diesem TypoScript Quellcode ins System eingebunden und die Funktion (hier: lib.navigation) in ein Fluid Template eingebunden werden.

Einbindung von TypoScript und Funktion

Nehmen wir, die Datei sei mit dem Namen lib.navigation.ts im Dateisystem Ihrer Webseite abgespeichert. Sie kann nun über das Setup ins System eingebunden werden:

@import "EXT:ibkprovider/Configuration/TypoScript/lib.navigation.ts"

Damit steht dem System nun die Datei bereit. Der nächste Schritt ist nun, die oben beschriebene Funktion in das entsprechende Fluid Template einzubinden:

 <div class="row">
    <div class="col-md-12 col-sm-12">
        <f:cObject typoscriptObjectPath="lib.navigation" />
    </div>
</div>

Damit steht Ihnen die Navigation in Ihrer Webseite zur Verfügung. 

TYPO3 Wiki: Bootstrap 3

Im ► Wiki unserer Agentur bietet wir ihnen ausführliche Code Schnipsel für Generierung einer Navigation mit Bootstrap 3:

  • TypoScript für die Bootstrap Navigation
  • CSS für die Bootstrap Navigation
Thomas Berscheid, 02.12.2019 22:59
^