Bootstrap 5 Mega Menu mit MenuProcessor

Mit dem Erscheinen von Bootstrap in der Version 5, vor allem aber mit dem Release der Versionen 11 und 12 von TYPO3 haben sich neue Möglichkeiten ergeben, den Aufbau eines MegaMenus mit Hilfe eines MenuProcessors zu erarbeiten. Dabei kommt nach wie vor TypoScript, Fluid, CSS und JavaScript zum Einsatz, aber viele Arbeiten können nun von Bordmitteln des TYPO3 Core erledigt werden. Die Verwendung der TYPO3 Extension VHS Viewhelper ist nicht mehr unbedingt notwendig, was das Upgrade einer TYPO3 Webseite erleichtern kann.

Das Auslesen der Daten für die Navigation übernimmt weiterhini eine TypoScript Konfiguration. Diese ist nun allerdings erheblich einfacher aufgebaut, da sie ein Array mit der gesamten Struktur der Navigation zurückgeben kann. Zudem müssen die unterschiedlichen Zustände der einzelnen Elemente nicht mehr beachtet werden, sondern können später im Fluid ihren Niederschlag finden.

Code Beispiel: MenuProcessor Code für Header Navagation

page {
  10 {
    dataProcessing {
      ## Header Navigation
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
        levels = 3
        as = headerMenu
        expandAll = 1
        excludeUidList = 6, 74, 25
        titleField = nav_title // title
      }
    }
  }
}

Dabei können wir mehrere Parameter konfigurieren:

• levels: Anzahl der darzustellenden Ebenen 
• as: Name der Variable, die weiter verarbeitet werden soll 
• expandAll: Sollen alle Untermenus ausgegeben werden? 
• ExcludeUidList: UIDs von Seiten, die nicht in der Navigation erscheinen sollen 
• titleField: Reihenfolge von Quellen für den ausgegebenen Titel der Seite 

Die oben definierte Variable für das Array können wir nun an unser Fluid Template bzw. Partial übergeben und auswerten. Hier als Beispiel die MegaMenu Navigation der Agentur IBK: 

Die oben definierte Variable für das Array können wir nun an unser Fluid Template bzw. Partial übergeben und auswerten. Hier als Beispiel die MegaMenu Navigation der Agentur IBK: 

  <div class="container-fluid">
   <div class="row navigation-top">
     <div class="col-12 nav-container">
       <nav class="navbar navbar-expand-md navbar-light bg-light">
         <button class="navbar-toggler" 
             type="button" 
             data-bs-toggle="collapse" 
             data-bs-target="#navbar" 
             aria-controls="navbar" 
             aria-expanded="false" 
             aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbar">
           <ul class="navbar-nav mr-auto">  
            [...hier der Code für die einzelnen Ebenen...]
           </ul>
         </div>
       </nav>
     </div>
   </div>
 </div>

Wir gehen hier in mehreren f:for Schleifen durch die Variable HeaderMenu aus dem MenuProcessor. Über das Objekt Children können wir per Fluid Condition abfragen, ob ein Menupunkt Unterpunkte hat. Diese können wir dann in einer weiteren Schleife durchgehen. Die Links zu den einzelnen Seiten können wir mit dem <f:link.page> Viewhelper erzeugen.

 <f:for each="{headerMenu}" as="menuLevel1Item">
   <li class="nav-item dropdown has-megamenu">
     <!-- Erste Ebene der Navigation -→
     <a class="nav-link dropdown-toggle" 
        title="{menuLevel1Item.data.subtitle}" 
        href="#" 
        id="dropdown{menuLevel1Item.data.uid}" 
        data-bs-toggle="dropdown">
       {menuLevel1Item.data.title}
     </a>
     <div class="dropdown-menu megamenu container-fluid" role="menu">
       <div class="row">
         <f:if condition="{menuLevel1Item.children}">
           <f:for each="{menuLevel1Item.children}" as="menuLevel2Item">
           <!-- Zweite Ebene der Navigation -→
             <div class="col-12 col-sm-6 col-md-4 col-lg-3 div-nav">
               <div class="col-megamenu">
                 <f:link.page 
                    pageUid="{menuLevel2Item.data.uid}" 
                    title="{menuLevel2Item.data.seo_title}" 
                    class="link-level3 strong">
                   {menuLevel2Item.data.title}
                 </f:link.page>
                 <f:if condition="{menuLevel2Item.children}">
                   <f:for each="{menuLevel2Item.children}" as="menuLevel3Item">
                   <!-- Dritte Ebene der Navigation -→
                     <div class="row">
                       <div class="col-12 nav-level3">
                         <f:link.page 
                             pageUid="{menuLevel3Item.data.uid}" 
                             class="link-level3" 
                             title="{menuLevel3Item.data.seo_title}">
                           {menuLevel3Item.data.title}
                         </f:link.page>
                       </div>
                     </div>
                   </f:for>
                 </f:if>
               </div>
             </div>
           </f:for>
         </f:if>
       </div>
     </div>
   </li>
 </f:for>

Das CSS ist gegenüber der Version eines MegaMenu mit Bootstrap 4 kaum verändert:

.has-megamenu {
 position: static;
}
.megamenu,
.dropdown-menu.megamenu {
 margin-top: 0px;
}
@media (max-width:767px) {
 .megamenu,
 .dropdown-menu.megamenu {
   width: calc(100% + 20px);
   margin-left: -10px;
   margin-right: -10px;
 }
}
.nav-container {
 padding: 0;
}
#navbar>ul>li.nav-item.dropdown.has-megamenu>div {
 border-radius: 0;
 background-color: #eee;
 border: 5px #729ebd solid;
 padding: 0;
 box-shadow: 0px 30px 30px -15px #333;
}
#navbar>ul>li.nav-item.dropdown.has-megamenu>div .row {
 margin: 0;
}
.div-nav {
 padding: 5px;
 color: #333;
 transition: all 0.5s;
}
.div-nav:hover {
 background-color: #729ebd;
 color: #111;
 transition: all 0.8s;
}
nav.navbar {
 background-color: #275ba4;
 border: none;
 margin-top: 0px;
 margin-bottom: 0;
 min-height: 40px;
 padding-left: 15px;
 padding-right: 15px;
 border-radius: 0 0 0 0;
 background: linear-gradient(#275ba4, #729ebd);
}
ul.nav.navbar-nav>li>a {
 color: #a4c2ed;
 padding: 12px 8px;
}
ul.nav.navbar-nav>li>a:hover {
 color: #ccc;
 background: linear-gradient(#275ba4, #a4c2ed);
}
ul.dropdown-menu {
 padding: 0;
}
#navbar.navbar-collapse.collapse>ul.nav.navbar-nav>li.dropdown>ul.dropdown-menu {
 background-color: #729ebd;
}
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a {
 background-color: #275ba4;
}
.dropdown-menu {
 border: none;
}
#navbar.navbar-collapse.collapse>ul.nav.navbar-nav>li.active>a {
 background: linear-gradient(#275ba4, #729ebd);
 color: #ddd;
}
#navbar.navbar-collapse.collapse>ul.nav.navbar-nav>li.dropdown.open>a.dropdown-toggle {
 background-color: #729ebd;
}
.dropdown-menu>.active>a:hover {
 background-color: #a4c2ed;
 color: #275ba4;
}
.dropdown-menu>li>a:hover {
 color: #275ba4;
 background-color: #a4c2ed;
}
div#navbar.navbar-collapse.collapse>ul.nav.navbar-nav>li.dropdown.active>a.dropdown-toggle {
 color: #eee;
}
.nav-level3 {
 padding: 0px 1px 0px 1px;
 font-size: 14px;
}
.nav-level3-img {
 padding: 1px 1px 1px 1px;
}
a.link-level3 {
 color: #275ba4;
 font-size: 14px;
 line-height: 22px;
 transition: all ease 0.5s;
}
a.link-level3:hover {
 color: #e8eff9;
 transition: all ease 0.5s;
 text-decoration: none;
}
 

Die Funktion des Bootstrap 5 Mega Menu stellt dieser JavasScript Code her:

document.addEventListener("DOMContentLoaded", function(){
 document.querySelectorAll('.dropdown-menu').forEach(function(element){
   element.addEventListener('click', function (e) {
     e.stopPropagation();
   });
 })
});