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:53]
Thomas Berscheid [Aufklappende Navigation mit Bootstrap 4]
bootstrap_4_navigation [10/03/2021 13:10]
Thomas Berscheid [Navigation Menu mit 3 Ebenen]
Zeile 119: Zeile 119:
  
   {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.   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.  
Zeile 127: 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 158: 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