bootstrap_4_navigation

Dies ist eine alte Version des Dokuments!


TypoScript Navigation mit Bootstrap 4 Mega Menu und Navbar

Mit der Version Bootstrap 4 bieten sich dem geneigten Entwickler neue Möglichkeiten, Elemente seiner Webseite zu gestalten. Die neue Version bringt u. a. einen eigenen Slider, mehr Farbmenus und viele kleine Elemente mit sich, die das Leben einfacher gestalten. Sie können eine Navigation in einer TYPO3 Webseite nun als Navbar oder als Mega Menu gestalten.

Eines dieser Elemente ist das Mega Menu. Dieses Menu erlaubt es dem Entwickler, die Navigation einer Webseite in mehreren Ebenen und mit weiteren Designelementen darzustellen. Dazu lässt sich per TypoScript eine Vorlage gestalten, die den Quelltext für die Bootstrap Anbindung aufbaut. Hier als Beispiel das TypoScript für die Navigation der Georgienseite.

lib.navigation_megamenu = COA
lib.navigation_megamenu {
  20 = HMENU
  20 {
    wrap =  <li class="nav-item dropdown megamenu-li"> | </li>

    ## Erste Ebene
    1 = TMENU
    1 {
      expAll = 1

      NO = 1
      NO {
        wrapItemAndSub = <li class="nav-item">|</li>
        ATagParams = class="nav-link"
      }

      CUR < .NO
      CUR {
        wrapItemAndSub = <li class="nav-item active">|</li>
        linkWrap = |<span class="sr-only">(current)</span>
      }

      ACT < .CUR

      IFSUB = 1
      IFSUB {
        wrapItemAndSub = <li class="nav-item dropdown megamenu-li"> | </li>
        ATagParams = class="nav-link dropdown-toggle"   ## Zeilenumbruch
          href="" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false"
      }

      ACTIFSUB < .IFSUB
      ACTIFSUB {
        ATagParams = class="nav-link dropdown-toggle"   ## Zeilenumbruch
          href="" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false"
      }

      CURIFSUB < .ACTIFSUB
    }
 
    ## Zweite Ebene
    2 = TMENU
    2 {
      expAll = 1
      wrap = <div class="dropdown-menu megamenu"><div class="row"> | </div></div>

      NO = 1
      NO {
        linkWrap = <div class="div-nav-title">|</div>
        ATagBeforeWrap = <div class="div-nav-title">|</div>
        allWrap = <div class="col-xs-12 col-sm-6 col-lg-3 div-nav"> | </div>
        ATagParams = class="nav-title"
        stdWrap {
          append = TEXT
          append {
            field = description // abstract // nav_title // subtitle // title
            wrap = <div class="div-nav-abstract"> | </div>
          }
        }
      } 
		
      IFSUB = 1
      IFSUB {
        linkWrap = <div class="div-nav-title"> | </div>
        ATagBeforeWrap = <div class="div-nav-title"> | </div>
        ATagParams = class="nav-title"
        wrapItemAndSub = <div class="col-xs-12 col-sm-6 col-lg-3 div-nav">|</div>
        stdWrap {
          append = TEXT
          append {
            field = description // abstract // nav_title // subtitle // title
            wrap = <div class="div-nav-abstract"> | </div>
          }
        }
      }
    }

    ## Dritte Ebene
    3 = TMENU
    3 {
      expAll = 1
      wrap = |
      NO = 1
      NO {
        linkWrap = <div class="div-nav-content">|</div>
        ATagBeforeWrap = <div class="div-nav-content">|</div>
        ATagParams = class="nav-content"
      }
    }
  }
}  

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.

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<div class="row" id="togglesidebar">
  <div class="col-12 col-md-12 col-lg-12">
    <a href="#sidebar" class="toggle-bar" data-toggle="collapse" title="Navigation"><i class="fas fa-bars"></i></a>
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-6 collapse in" id="sidebar">            
    <div class="list-group panel">
      <!-- Menu 1. Ebene ANFANG -->
      <v:menu expandAll="1" entryLevel="0" levels="2" classHasSubpages="active" as="menuLevel1" excludePages="2">
        <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>
          <!-- Menu 2. Ebene ANFANG -->
          <div class="collapse" id="menu{menuLevel1Iteration.index}">
            <v:menu pageUid="{menuLevel1Item.uid}" expandAll="1" entryLevel="1" as="menuLevel2" excludePages="{excludepages}">
              <f:for each="{menuLevel2}" as="menuLevel2Item" iteration="menuLevel2Iteration">
                <f:if condition="{menuLevel2Item.hasSubPages}">
                  <f:then>
                    <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 -->
                    <div class="collapse" id="menu{menuLevel1Iteration.index}sub{menuLevel2Iteration.index}">
                      <v:menu pageUid="{menuLevel2Item.uid}" expandAll="1" entryLevel="1" as="menuLevel3">
                        <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>
                        </f:for>
                      </v:menu>
                    </div>
                    <!-- Menu 3. Ebene ENDE -->
                  </f:then>
                  <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>
                  </f:else>
                </f:if>
              </f:for>
            </v:menu>
          </div>
          <!-- Menu 2. Ebene ENDE -->
        </f:for>
      </v:menu>
      <!-- Menu 1. Ebene ENDE -->
    </div>
  </div>
</div>
lib.navigation_sidebar = COA
lib.navigation_sidebar {
  wrap = <nav class="navbar navbar-dark bg-custom"> | </nav>
  
  10 = HMENU
  10 {
    wrap = <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> | </ul> </div>
     
    1 = TMENU
    1 {
      expAll = 1
     
      NO = 1
      NO {
        ATagTitle.field = nav_title // subtitle // title
        wrapItemAndSub = <li class="nav-item">|</li>
        ATagParams = class="nav-link"
      }
     
      CUR < .NO
      CUR {
        wrapItemAndSub = <li class="nav-item active">|</li>
      }
     
      ACT < .CUR
     
      IFSUB = 1
      IFSUB {
        ATagTitle.field = nav_title // subtitle // title
        ATagParams = class="nav-link dropdown-toggle" 
          id="navbarDropdownMenuLink" role="button" 
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
        ATagBeforeWrap = 1
        wrapItemAndSub = <li class="nav-item dropdown">|</li>
    				
      }
     
      ACTIFSUB < .IFSUB
      ACTIFSUB {
        wrapItemAndSub = <li class="nav-item dropdown active">|</li>
      }
     
      CURIFSUB < .ACTIFSUB
    }
     
    2 = TMENU
    2 {
      wrap = <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">|</div>
    	
      NO = 1
      NO {
        ATagTitle.field = nav_title // subtitle // title
        linkWrap = |
        ATagBeforeWrap = 1
        ATagParams = class="dropdown-item dropdown-normal"
      }
      CUR < .NO
      CUR {
        ATagParams = class="dropdown-item active"
      }
    
      ACT < .CUR
    }
  }
}
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • bootstrap_4_navigation.1615377028.txt.gz
  • Zuletzt geändert: 10/03/2021 12:50
  • von Thomas Berscheid