no way to compare when less than two revisions
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | bootstrap_4_navigation [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== TypoScript Navigation mit Bootstrap 4 Mega Menu und Navbar ====== | ||
+ | Mit der Version Bootstrap 4 bieten sich dem geneigten Entwickler neue Möglichkeiten, | ||
+ | |||
+ | ===== 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=" | ||
+ | | ||
+ | ## Erste Ebene | ||
+ | 1 = TMENU | ||
+ | 1 { | ||
+ | expAll = 1 | ||
+ | | ||
+ | NO = 1 | ||
+ | NO { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | ATagParams = class=" | ||
+ | } | ||
+ | | ||
+ | CUR < .NO | ||
+ | CUR { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | linkWrap = |<span class=" | ||
+ | } | ||
+ | | ||
+ | ACT < .CUR | ||
+ | | ||
+ | IFSUB = 1 | ||
+ | IFSUB { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | ATagParams = class=" | ||
+ | href="" | ||
+ | data-toggle=" | ||
+ | aria-haspopup=" | ||
+ | aria-expanded=" | ||
+ | } | ||
+ | | ||
+ | ACTIFSUB < .IFSUB | ||
+ | ACTIFSUB { | ||
+ | ATagParams = class=" | ||
+ | href="" | ||
+ | data-toggle=" | ||
+ | aria-haspopup=" | ||
+ | aria-expanded=" | ||
+ | } | ||
+ | | ||
+ | CURIFSUB < .ACTIFSUB | ||
+ | } | ||
+ | |||
+ | ## Zweite Ebene | ||
+ | 2 = TMENU | ||
+ | 2 { | ||
+ | expAll = 1 | ||
+ | wrap = <div class=" | ||
+ | | ||
+ | NO = 1 | ||
+ | NO { | ||
+ | linkWrap = <div class=" | ||
+ | ATagBeforeWrap = <div class=" | ||
+ | allWrap = <div class=" | ||
+ | ATagParams = class=" | ||
+ | stdWrap { | ||
+ | append = TEXT | ||
+ | append { | ||
+ | field = description // abstract // nav_title // subtitle // title | ||
+ | wrap = <div class=" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | IFSUB = 1 | ||
+ | IFSUB { | ||
+ | linkWrap = <div class=" | ||
+ | ATagBeforeWrap = <div class=" | ||
+ | ATagParams = class=" | ||
+ | wrapItemAndSub = <div class=" | ||
+ | stdWrap { | ||
+ | append = TEXT | ||
+ | append { | ||
+ | field = description // abstract // nav_title // subtitle // title | ||
+ | wrap = <div class=" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | ## Dritte Ebene | ||
+ | 3 = TMENU | ||
+ | 3 { | ||
+ | expAll = 1 | ||
+ | wrap = | | ||
+ | NO = 1 | ||
+ | NO { | ||
+ | linkWrap = <div class=" | ||
+ | ATagBeforeWrap = <div class=" | ||
+ | ATagParams = class=" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | | ||
+ | ===== Aufklappende Navigation mit Bootstrap 4 ===== | ||
+ | |||
+ | 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, | ||
+ | |||
+ | 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, | ||
+ | |||
+ | ==== VHS Viewhelper über Namespace einbinden ==== | ||
+ | |||
+ | |||
+ | Dazu binden wir den VHS Viewhelper (die Extension muss natürlich installiert sein!) in unser Fluid Template ein: | ||
+ | |||
+ | {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, | ||
+ | | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <a href="# | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | ==== Navigation Menu mit 3 Ebenen ==== | ||
+ | |||
+ | Für dieses Menu gehen wir die Ebenen der Seitenstruktur, | ||
+ | | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | | ||
+ | <!-- Menu 1. Ebene ANFANG --> | ||
+ | | ||
+ | <v:menu expandAll=" | ||
+ | <f:for each=" | ||
+ | <a href="# | ||
+ | title=" | ||
+ | class=" | ||
+ | data-toggle=" | ||
+ | data-parent="# | ||
+ | aria-expanded=" | ||
+ | | ||
+ | <!-- Menu 2. Ebene ANFANG --> | ||
+ | | ||
+ | <div class=" | ||
+ | <v:menu pageUid=" | ||
+ | <f:for each=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | <a href="# | ||
+ | class=" | ||
+ | data-toggle=" | ||
+ | aria-expanded=" | ||
+ | | ||
+ | <!-- Menu 3. Ebene ANFANG --> | ||
+ | | ||
+ | <div class=" | ||
+ | <v:menu pageUid=" | ||
+ | <f:for each=" | ||
+ | <a href="< | ||
+ | title=" | ||
+ | class=" | ||
+ | data-parent="# | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <!-- Menu 3. Ebene ENDE --> | ||
+ | | ||
+ | </ | ||
+ | < | ||
+ | <a href="< | ||
+ | title=" | ||
+ | class=" | ||
+ | data-parent="# | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <!-- Menu 2. Ebene ENDE --> | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <!-- Menu 1. Ebene ENDE --> | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | ===== Navigation mit Navbar in Bootstrap 4 ===== | ||
+ | |||
+ | lib.navigation_sidebar = COA | ||
+ | lib.navigation_sidebar { | ||
+ | wrap = <nav class=" | ||
+ | | ||
+ | 10 = HMENU | ||
+ | 10 { | ||
+ | wrap = <div class=" | ||
+ | |||
+ | 1 = TMENU | ||
+ | 1 { | ||
+ | expAll = 1 | ||
+ | |||
+ | NO = 1 | ||
+ | NO { | ||
+ | ATagTitle.field = nav_title // subtitle // title | ||
+ | wrapItemAndSub = <li class=" | ||
+ | ATagParams = class=" | ||
+ | } | ||
+ | |||
+ | CUR < .NO | ||
+ | CUR { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
+ | |||
+ | ACT < .CUR | ||
+ | |||
+ | IFSUB = 1 | ||
+ | IFSUB { | ||
+ | ATagTitle.field = nav_title // subtitle // title | ||
+ | ATagParams = class=" | ||
+ | id=" | ||
+ | data-toggle=" | ||
+ | ATagBeforeWrap = 1 | ||
+ | wrapItemAndSub = <li class=" | ||
+ | |||
+ | } | ||
+ | |||
+ | ACTIFSUB < .IFSUB | ||
+ | ACTIFSUB { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
+ | |||
+ | CURIFSUB < .ACTIFSUB | ||
+ | } | ||
+ | |||
+ | 2 = TMENU | ||
+ | 2 { | ||
+ | wrap = <div class=" | ||
+ | |||
+ | NO = 1 | ||
+ | NO { | ||
+ | ATagTitle.field = nav_title // subtitle // title | ||
+ | linkWrap = | | ||
+ | ATagBeforeWrap = 1 | ||
+ | ATagParams = class=" | ||
+ | } | ||
+ | CUR < .NO | ||
+ | CUR { | ||
+ | ATagParams = class=" | ||
+ | } | ||
+ | | ||
+ | ACT < .CUR | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |