Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | bootstrap_navigation [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== TypoScript Navigation mit Bootstrap 3 Navbar ====== | ||
+ | |||
+ | Die Navbar von Twitter Bootstrap hat sich als Quasi-Standard bei der Generierung responsiver Webseite durchgesetzt. Das Framework erlaubt es mit seinem Modell von '' | ||
+ | |||
+ | Das zweite wichtige Prinzip einer Bootstrap Navigation: Wenn man in einem Menu eine Navigation mit lediglich einer Ebene hat, so werden diese Punkte als Links dargestellt. Gibt es jedoch eine zweite Ebene in einer Navigation, so schaltet man den Link zu einem Dropdown-Menu um. Beim Klick auf dieses Drop Down Menu wird dann die folgende Ebene geöffnet. Das Wesen einer Navbar. | ||
+ | |||
+ | Der große Vorteil des Verhaltens der Navbar: Wenn man auf einem Touchscreen das Menu anklickt, erscheint die folgende Ebene auf dem Bildschirm. Nutzt man einen Hover-Effekt, | ||
+ | |||
+ | Der große Nachteil dieses Verhaltens: Die erste Ebene einer Navigation ist nun, zumindest über die obere Leiste, nicht mehr erreichbar. Wenn man also in einer Seite einen Überblick über die folgenden Seiten schaffen möchte, muss man diese Seite in die folgende Ebene verlagern. Zudem kann man die 1. Ebene trotzdem noch über eine Parallel-Navigation erreichen. Man sollte also einen Verweis in die Übersicht in der 2. Ebene einrichten, um duplicate Content zu vermeiden. | ||
+ | |||
+ | |||
+ | ===== Header Navigation ===== | ||
+ | |||
+ | |||
+ | Navigation mit Bootstrap in 3 Ebenen. | ||
+ | |||
+ | lib.navigation_top = COA | ||
+ | lib.navigation_top { | ||
+ | wrap = <nav class=" | ||
+ | |||
+ | ## Hamburger Button zum Aufklappen der Navigation auf kleineren Endgeräten | ||
+ | 30 = COA | ||
+ | 30 { | ||
+ | wrap = <div class=" | ||
+ | 10 = COA | ||
+ | 10 { | ||
+ | // hamburger icon: | ||
+ | wrap ( | ||
+ | <button type=" | ||
+ | class=" | ||
+ | data-toggle=" | ||
+ | data-target="# | ||
+ | aria-expanded=" | ||
+ | aria-controls=" | ||
+ | ) | ||
+ | 10 = TEXT | ||
+ | 10.value = <span class=" | ||
+ | 20 = TEXT | ||
+ | 20.value = <span class=" | ||
+ | 21 < .20 | ||
+ | 22 < .20 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ## Aufbau der Navigation | ||
+ | 20 = HMENU | ||
+ | 20 { | ||
+ | wrap = <div id=" | ||
+ | | ||
+ | ## Startseite und Sitemap ausschliessen | ||
+ | excludeUidList = 1, 2 | ||
+ | |||
+ | ## 1. Ebene der Navigation | ||
+ | 1 = TMENU | ||
+ | 1 { | ||
+ | expAll = 1 | ||
+ | |||
+ | NO = 1 | ||
+ | NO { | ||
+ | ATagTitle.field = title | ||
+ | wrapItemAndSub = < | ||
+ | } | ||
+ | | ||
+ | CUR < .NO | ||
+ | CUR { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
+ | | ||
+ | ACT < .CUR | ||
+ | | ||
+ | IFSUB = 1 | ||
+ | IFSUB { | ||
+ | ATagTitle.field = title | ||
+ | ATagParams = class=" | ||
+ | linkWrap = |<b class=" | ||
+ | ATagBeforeWrap = 1 | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
+ | | ||
+ | ACTIFSUB < .IFSUB | ||
+ | ACTIFSUB { | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
+ | | ||
+ | CURIFSUB < .ACTIFSUB | ||
+ | } | ||
+ | | ||
+ | ## 2. Ebene der Navigation | ||
+ | 2 < .1 | ||
+ | 2 { | ||
+ | wrap = <ul class=" | ||
+ | |||
+ | IFSUB { | ||
+ | ATagTitle.field = title | ||
+ | ATagParams = class=" | ||
+ | linkWrap = | | ||
+ | ATagBeforeWrap = 1 | ||
+ | wrapItemAndSub = < | ||
+ | } | ||
+ | CURIFSUB { | ||
+ | ATagTitle.field = title | ||
+ | ATagParams = class=" | ||
+ | linkWrap = | | ||
+ | ATagBeforeWrap = 1 | ||
+ | wrapItemAndSub = < | ||
+ | } | ||
+ | ACTIFSUB { | ||
+ | ATagTitle.field = title | ||
+ | ATagParams = class=" | ||
+ | linkWrap = | | ||
+ | ATagBeforeWrap = 1 | ||
+ | wrapItemAndSub = < | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ## 3. Ebene der Navigation | ||
+ | 3 < .2 | ||
+ | 3 { | ||
+ | wrap = <ul class=" | ||
+ | NO = 1 | ||
+ | NO { | ||
+ | ATagTitle.field = title | ||
+ | wrapItemAndSub = < | ||
+ | } | ||
+ | | ||
+ | IFSUB > | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | | ||
+ | ===== Navigation fixiert am oberen Rand ===== | ||
+ | |||
+ | |||
+ | Ergänzen Sie die Genierung der obersten HTML-Zeile für die Navigation mit der Klasse '' | ||
+ | |||
+ | lib.navigation_top = COA | ||
+ | lib.navigation_top { | ||
+ | wrap = <nav class=" | ||
+ | [...weiteres TypoScript...] | ||
+ | } | ||
+ | | ||
+ | |||