Mega Menu Navigation in TYPO3 mit Bootstrap 4

Vorteile eines Mega Menu 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:

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

Aufbau der Navigation in TypoScript

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

Erste Ebene 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.

Zweite Ebene der Navigation

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

Dritte Ebene der Navigation

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

Einbindung der Navigation in Setup und Template

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.

TYPO3 Wiki: Bootstrap 4

Im ► Wiki unserer Agentur bietet 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
Thomas Berscheid, 02.12.2019 22:59
^