Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
bootstrap_4_navigation [25/09/2019 20:46]
Thomas Berscheid
bootstrap_4_navigation [25/09/2019 20:47] (aktuell)
Thomas Berscheid
Zeile 2: Zeile 2:
  
 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. 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.
 +
 +===== MegaMenu mit Bootstrap 4 =====
 +
 +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"​
 +        }
 +      }
 +    }
 +  }  ​
  • bootstrap_4_navigation.txt
  • Zuletzt geändert: 25/09/2019 20:47
  • von Thomas Berscheid