TypoScript Navigation mit Bootstrap 4

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.

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"
      }
    }
  }
}  
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.txt
  • Zuletzt geändert: 25/09/2019 20:47
  • von Thomas Berscheid