TYPO3 Lösung

Setzt man in TYPO3 auf dem Bootstrap Introduction Package auf und möchte das Hauptmenü erweitern, um 3 Ebenen statt den initial vorhandenen 2 Ebenen anzeigen zu lassen, müssen im Grunde nur 2 Stellen angepasst werden. Zuerst stellt man in der setup.txt (welche wir finden in \typo3conf\ext\bootstrap_package\Configuration\TypoScript\setup.txt) sicher, dass wir ausreichend Level zur Verfügung haben, die wir anzeigen lassen können, der MenuProcessor also weiß, wieviele Ebenen dieser ausliefern soll. Danach müssen wir dann in der entsprechenden Template-Datei das Menü in der gewünschten Weise erweitern.  Diese Main.html finden wir unter \typo3conf\ext\bootstrap_package\Resources\Private\Partials\Page\Navigation\. 

 

Aber zuerst die setup.txt. Hier ersetzen / erweitern wir die Zeilen

 

        ##########################

        ### DATA PREPROCESSING ###

        ##########################

        dataProcessing {

            10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor

            10 {

                entryLevel = 0

                levels = 2

                includeSpacer = 1

                as = mainnavigation

 

beispielsweise mit

 

        ##########################

        ### DATA PREPROCESSING ###

        ##########################

        dataProcessing {

            10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor

            10 {

                entryLevel = 0

                levels = 88

                expandAll = 1

                includeSpacer = 1

                as = mainnavigation

 

Nun zur Main.html: Möchten wir erreichen, dass die zweite und dritte Ebenen bei einem Klick auf einen Menüpunkt der ersten Ebene erscheinen, reicht es aus, den Inhalt der folgenden if-Bedingung:

 

<f:if condition="{mainnavigation}">

</f:if>

 

so zu gestalten (ohne Newlines und Absätze, da für die Darstellung hier zu verschachtelt):

 

<f:if condition="{mainnavigation}">

 <nav class="navbar-collapse collapse" role="navigation">

  <ul class="nav navbar-nav navbar-main">

   <f:for each="{mainnavigationlala}" as="mainnavigationItem">

    <li class="{f:if(condition: mainnavigationItem.active, then:'active')} {f:if(condition: mainnavigationItem.children, then:'dropdown')}">

     <f:if condition="{mainnavigationItem.spacer}">

      <f:then>

       <p class="navbar-text">{mainnavigationItem.title}</p>

      </f:then>

      <f:else>

       <f:if condition="{mainnavigationItem.children}">

        <f:then>

         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

         <span>{mainnavigationItem.title}</span>

         <b class="caret"></b>

         <span class="bar"></span>

         </a>

         <ul class="dropdown-menu">

         <f:for each="{mainnavigationItem.children}" as="child">

          <li class="{f:if(condition: child.active, then:'active')} {f:if(condition: child.children, then:'dropdown')}">

          <f:if condition="{child.spacer}">

           <f:then>

            <p class="navbar-text">{child.title}</p>

           </f:then>

           <f:else>

            <f:if condition="{child.children}">

             <f:then>             

              <span>{mainnavigationItem.title}</span>

              <b class="caret"></b>

              <span class="bar"></span>

              <ul>

               <f:for each="{child.children}" as="grandchild">

                <f:if condition="{grandchild.spacer}">

                <f:then>

                 <p class="navbar-text">{grandchild.title}</p>

                </f:then>

                <f:else>

                 <a href="/{grandchild.link}" target="{grandchild.target}" title="{grandchild.title}">

                 <span>{grandchild.title}</span>

                 <span class="bar"></span>

                 </a>

                </f:else>

                </f:if>

               </f:for>

              </ul>

             </f:then>

             <f:else>

              <a href="/{child.link}" target="{child.target}" title="{child.title}">

              <span>{child.title}</span>

              <span class="bar"></span>

              </a>

             </f:else>

            </f:if>

           </f:else>

          </f:if>

         </f:for>

         </ul>

        </f:then>

        <f:else>

         <a href="/{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">

          <span>{mainnavigationItem.title}</span>

          <span class="bar"></span>

         </a>

        </f:else>

       </f:if>

      </f:else>

     </f:if>

    </li>

   </f:for>

  </ul>

 </nav>

</f:if>

 

Jetzt haben wir ein schönes Menü mit drei Ebenen und können dies nach Belieben stylen. Umgesetzt in TYPO3 8.7.1.