Mega Menu Navigation in TYPO3 mit Bootstrap 4

Eine Mega Menu Navigation bietet eigene Vorteile:

• Mehrere Ebenen der Navigation sind auf einen Blick zu sehen
• Man kann neben den reinen Textlinks weitere Informationen wie Bilder oder kurze Texte hinterlegen
• Neben den reinen Textlinks können auch redaktionelle Bereiche mit tiefergehenden Informationen gestaltet werden
• Alle diese Elemente sind einfach responsiv für mobile Endgeräte zu gestalten

Das Bootstrap 4 Framework bietet dazu eine Möglichkeit an, solch ein Menu zu gestalten. TYPO3 bietet dazu mehrere Ansätze:

• Die Gestaltung eines Mega Menu mit Hilfe des VHS Viewhelper
• Aufbau eines Mega Menus mit TypoScript

In diesem Artikel erfahren Sie, wie Sie ein Mega Menu mit TypoScript erzeugen können.

Der Aufbau des TypoScript für ein Mega Menu folgt dem üblichen Weg bei TYPO3:

• Anlage einer Datei zum Speichern und Verwalten des Quellcode in TypoScript
• Programmierung einer Funktion in TypoScript
• Einbindung der Datei ins Setup der Webseite
• Aufruf der Funktion im Fluid Template oder Partial

Hier der Code zum Aufbau der Funktion und des Mantels von HTML- / CSS-Code für Bootstrap 4:

 lib.megamenu = COA
lib.megamenu {
    20 = HMENU
    20 {
        wrap =  <li class="nav-item dropdown megamenu-li"> | </li>
        [...Hier der Code für die Ebenen der Navigation...]
    }
}

Bei den drei Ebenen der Navigation handelt es sich jeweils um ein TMENU in TypoScript.

    1 = TMENU
   1 {
        expAll = 1
          
        NO = 1
        NO {
            wrapItemAndSub = <li class="nav-item">|</li>
            ATagParams = class="nav-link"
        }
 
        CUR < .NO
        CUR {
            wrapItemAndSub = <li class="nav-item active">|</li>
            linkWrap = |<span class="sr-only">(current)</span>
        }
      
        ACT < .CUR
        
        IFSUB = 1
        IFSUB {
            wrapItemAndSub = <li class="nav-item dropdown megamenu-li"> | </li>
            ATagParams = class="nav-link dropdown-toggle" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
        }
         
        ACTIFSUB < .IFSUB
        ACTIFSUB {
            ATagParams = class="nav-link dropdown-toggle" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
        }
     
        CURIFSUB < .ACTIFSUB
    }

Mit den unterschiedlichen Zuständen der Navigation in TypoScript ist es recht einfach, die verschiedenen Zustände der Navigation exakt zu füllen.

Über das wrapItemAndSub in der ersten Ebene haben wir bereits festgelegt, dass die folgenden Elemente der zweiten Ebene in das HTML-Gerüst der 1. Ebene eingefügt werden. Somit können wir die 2. Ebene ebenfalls als TMENU in das TypoScript einfügen.

     2 = TMENU
    2 {
        expAll = 1
        wrap = <div class="dropdown-menu megamenu"><div class="row"> | </div></div>
        
        NO = 1
        NO {
            linkWrap = <div class="div-nav-title">|</div>
            ATagBeforeWrap = <div class="div-nav-title">|</div>
            allWrap = <div class="col-xs-12 col-sm-6 col-lg-3 div-nav"> | </div>
            ATagParams = class="nav-title"
            ATagTitle.field = title
        } 
            
        IFSUB = 1
        IFSUB {
            linkWrap = <div class="div-nav-title"> | </div>
            ATagBeforeWrap = <div class="div-nav-title"> | </div>
            ATagParams = class="nav-title"
            wrapItemAndSub = <div class="col-xs-12 col-sm-6 col-lg-3 div-nav">|</div>
        }
    }

Nun können wir die dritte Ebene der Navigation einfügen.

     3 = TMENU
    3 {
        expAll = 1
        wrap = |
        NO = 1
        NO {
            linkWrap = <div class="div-nav-content">|</div>
            ATagBeforeWrap = <div class="div-nav-content">|</div>
            ATagParams = class="nav-content"
        }
    }

Die oben beschriebene Navigation muss nun ins TypoScript der Webseite eingebunden werden. Ab der Version LTS v9.5 von TYPO3 geschieht dies am Besten über den Import der Datei, in der sich der TypoScript Code befindet:

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

In dieser Datei befindet sich nun die Funktion, die nun ins Fluid Template bzw. Partial eingebunden werden muss:

<f:cObject typoscriptObjectPath="lib.megamenu" />

Damit ist die Funktion auf der Webseite lauffähig.

Im Wiki unserer Agentur bieten wir Ihnen ausführliche Code Schnipsel für Generierung einer Navigation mit Bootstrap 4:

  TypoScript für die Bootstrap Navigation

  CSS für die Bootstrap Navigation

Zum Aufbau eines Mega Menus mit Bootstrap 4 braucht es ein wenig Quellcode. Aus der Arbeit unserer Agentur haben wir Source Code für TypoScript und CSS zum Download bereitgestellt:

 TypoScript Download Mega Menu mit Bootstrap 4

 CSS Style Sheet für Navigation mit Bootstrap 4

CodePen:
TYPO3 Mega Menu with Bootstrap 4 and VHS Viewhelper