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:54]
Thomas Berscheid [Navigation auf- und zuklappen]
bootstrap_4_navigation [10/03/2021 13:10]
Thomas Berscheid [Navigation Menu mit 3 Ebenen]
Zeile 130: Zeile 130:
   </div>   </div>
      
-==== Navigation Menu ====+==== 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 164: 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