bootstrap_4_navigation

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
bootstrap_4_navigation [10/03/2021 12:44]
Thomas Berscheid [Aufklappende Navigation mit Bootstrap 4]
bootstrap_4_navigation [10/03/2021 13:10]
Thomas Berscheid [Navigation Menu mit 3 Ebenen]
Zeile 108: Zeile 108:
      
 ===== Aufklappende Navigation mit Bootstrap 4 ===== ===== Aufklappende Navigation mit Bootstrap 4 =====
 +
 +Nicht immer ist ein Mega Menu die erste Wahl für die Navigation einer TYPO3 Webseite. Je nach Fülle der Angebote kann es den Benutzer erschlagen, mehrere Hundert Links angeboten zu bekommen. Gerade auf mobilen Endgeräten wird es beim Klicken dann zur Herausforderung, sich ins richtige Element zu bewegen. Nichtsdestrotrotz: Bei Desktop Rechnern lässt sich bei einem Mega Menu der Inhalt der Webseite sehr schnell erfassen.
 +
 +Vor solch einem Dilemma standen wir Anfang 2021 bei der Georgienseite. Seit der Schaltung des ersten Mega Menus kamen zu den bestehenden rund 350 Seiten fast 100 neue hinzu. Das ganze wurde nun etwas unübersichtlich, und aus SEO Sicht sind mehr als 400 interne Links auf einer Webseite auch nicht förderlich. Hier also ein Beispiel für eine aufklappende Bootstrap 4 Navigation, die mit Hilfe von Fluid und VHS Viewhelper erstellt ist.
 +
 +==== VHS Viewhelper über Namespace einbinden ====
 +
 +
 +Dazu binden wir den VHS Viewhelper (die Extension muss natürlich installiert sein!) in unser Fluid Template ein:
  
   {namespace v=FluidTYPO3\Vhs\ViewHelpers}   {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 +
 +==== Navigation auf- und zuklappen ====
 +  
 +Für die Umschaltung der Navigation haben wir den oft genutzten Hamburger Button als Font Awesome verwendet. Per CSS kann man Effekte hinzufügen, so eine Änderung des Symbols, man es drehen oder die Farbe ändern.  
      
   <div class="row" id="togglesidebar">   <div class="row" id="togglesidebar">
Zeile 116: Zeile 129:
     </div>     </div>
   </div>   </div>
 +  
 +==== Navigation Menu mit 3 Ebenen ====
 +
 +Für dieses Menu gehen wir die Ebenen der Seitenstruktur, die uns das TYPO3 Backend liefert, durch und ordnen die Elemente für Texte und Links in ein HTML-, CSS- und JavaScript-Konstrukt ein, dass uns Bootstrap vorgibt. Dabei müssen wir mehrere Elemente für die JavaScript-Effekte zum auf- und zuklappen von Links / Schaltflächen durchzählen, was mit TypoScript nicht möglich ist. Dies ist einer Gründe, warum wir den VHS Viewhelper einsetzen.
 +  
   <div class="row">   <div class="row">
     <div class="col-12 col-md-6 collapse in" id="sidebar">                 <div class="col-12 col-md-6 collapse in" id="sidebar">            
       <div class="list-group panel">       <div class="list-group panel">
 +      
         <!-- Menu 1. Ebene ANFANG -->         <!-- Menu 1. Ebene ANFANG -->
-        <v:menu expandAll="1" entryLevel="0" levels="2" classHasSubpages="active" as="menuLevel1" excludePages="2">+         
 +        <v:menu expandAll="1" entryLevel="0" levels="2" classHasSubpages="active" as="menuLevel1">
           <f:for each="{menuLevel1}" as="menuLevel1Item" iteration="menuLevel1Iteration">           <f:for each="{menuLevel1}" as="menuLevel1Item" iteration="menuLevel1Iteration">
-            <a href="#menu{menuLevel1Iteration.index}" title="{menuLevel1Item.seo_title}" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><span class="hidden-sm-down">{menuLevel1Item.linktext}</span> </a>+            <a href="#menu{menuLevel1Iteration.index}"  
 +              title="{menuLevel1Item.seo_title}"  
 +              class="list-group-item collapsed"  
 +              data-toggle="collapse"  
 +              data-parent="#sidebar"  
 +              aria-expanded="false"><span class="hidden-sm-down">{menuLevel1Item.linktext}</span> </a> 
 +              
             <!-- Menu 2. Ebene ANFANG -->             <!-- Menu 2. Ebene ANFANG -->
 +            
             <div class="collapse" id="menu{menuLevel1Iteration.index}">             <div class="collapse" id="menu{menuLevel1Iteration.index}">
-              <v:menu pageUid="{menuLevel1Item.uid}" expandAll="1" entryLevel="1" as="menuLevel2" excludePages="{excludepages}">+              <v:menu pageUid="{menuLevel1Item.uid}" expandAll="1" entryLevel="1" as="menuLevel2">
                 <f:for each="{menuLevel2}" as="menuLevel2Item" iteration="menuLevel2Iteration">                 <f:for each="{menuLevel2}" as="menuLevel2Item" iteration="menuLevel2Iteration">
                   <f:if condition="{menuLevel2Item.hasSubPages}">                   <f:if condition="{menuLevel2Item.hasSubPages}">
                     <f:then>                     <f:then>
-                      <a href="#menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}" class="list-group-item" data-toggle="collapse" aria-expanded="false">{menuLevel2Item.linktext}</a>+                      <a href="#menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}"  
 +                        class="list-group-item"  
 +                        data-toggle="collapse"  
 +                        aria-expanded="false">{menuLevel2Item.linktext}</a> 
 +                        
                       <!-- Menu 3. Ebene ANFANG -->                       <!-- Menu 3. Ebene ANFANG -->
 +                      
                       <div class="collapse" id="menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}">                       <div class="collapse" id="menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}">
                         <v:menu pageUid="{menuLevel2Item.uid}" expandAll="1" entryLevel="1" as="menuLevel3">                         <v:menu pageUid="{menuLevel2Item.uid}" expandAll="1" entryLevel="1" as="menuLevel3">
                           <f:for each="{menuLevel3}" as="menuLevel3Item" iteration="menuLevel3Iteration">                           <f:for each="{menuLevel3}" as="menuLevel3Item" iteration="menuLevel3Iteration">
-                            <a href="<f:uri.page pageUid="{menuLevel3Item.uid}" />" title="{menuLevel3Item.seo_title}" class="list-group-item" data-parent="#m{menuLevel1Iteration.index}s{menuLevel2Iteration.index}">{menuLevel3Item.linktext}</a>+                            <a href="<f:uri.page pageUid="{menuLevel3Item.uid}" />"  
 +                              title="{menuLevel3Item.seo_title}"  
 +                              class="list-group-item"  
 +                              data-parent="#menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}">{menuLevel3Item.linktext}</a>
                           </f:for>                           </f:for>
                         </v:menu>                         </v:menu>
                       </div>                       </div>
 +                      
                       <!-- Menu 3. Ebene ENDE -->                       <!-- Menu 3. Ebene ENDE -->
 +                      
                     </f:then>                     </f:then>
                     <f:else>                     <f:else>
-                      <a href="<f:uri.page pageUid="{menuLevel2Item.uid}" />" title="{menuLevel2Item.seo_title}" class="list-group-item collapsed" data-parent="#sidebar"> <span class="hidden-sm-down">{menuLevel2Item.linktext}</span></a>+                      <a href="<f:uri.page pageUid="{menuLevel2Item.uid}" />"  
 +                        title="{menuLevel2Item.seo_title}"  
 +                        class="list-group-item collapsed"  
 +                        data-parent="#sidebar"> <span class="hidden-sm-down">{menuLevel2Item.linktext}</span></a>
                     </f:else>                     </f:else>
                   </f:if>                   </f:if>
Zeile 147: Zeile 187:
               </v:menu>               </v:menu>
             </div>             </div>
 +            
             <!-- Menu 2. Ebene ENDE -->             <!-- Menu 2. Ebene ENDE -->
 +            
           </f:for>           </f:for>
         </v:menu>         </v:menu>
 +        
         <!-- Menu 1. Ebene ENDE -->         <!-- Menu 1. Ebene ENDE -->
 +        
       </div>       </div>
     </div>     </div>
  • bootstrap_4_navigation.txt
  • Zuletzt geändert: 10/03/2021 13:10
  • von Thomas Berscheid