Dies ist eine alte Version des Dokuments!
Die folgenden Snippets sind für den Gebrauch des Bootstrap Frameworks gedacht.
http://getbootstrap.com/examples/navbar/
Dieses TypoScript erstellt die komplette Navbar inklusive Firmenname. Bei Verwendung des Spacers SPC wird dieser als Nav header ausgegeben (nicht wählbare Überschrift im Menü). Über dem Nav header wird eine Trennlinie eingefügt, außer es ist der erste Menüpunkt auf dieser Ebene.
lib.bootstrapNav = COA lib.bootstrapNav { wrap = <nav class="navbar navbar-default navbar-static-top"> <div class="container"> | </div> </nav> 10 = COA 10 { wrap = <div class="navbar-header"> | </div> 10 = COA 10 { # Hamburger-Icon: wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button> 10 = TEXT 10.value = <span class="sr-only">Toggle navigation</span> 20 = TEXT 20.value = <span class="icon-bar"></span> 21 < .20 22 < .20 } # Firmenlogo: 20 = TEXT 20.value = Projektname 20.typolink { parameter = http://www.example.org/ ATagParams = class="navbar-brand" } } 20 = HMENU 20 { special = directory special.value = 11 wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div> 1 = TMENU 1 { expAll = 1 NO = 1 NO { ATagTitle.field = title wrapItemAndSub = <li>|</li> } CUR = 1 CUR { ATagTitle.field = title wrapItemAndSub = <li class="act">|</li> } ACT < .CUR IFSUB = 1 IFSUB { ATagTitle.field = title ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" linkWrap = |<b class="caret"></b> ATagBeforeWrap = 1 wrapItemAndSub = <li class="dropdown">|</li> } ACTIFSUB = 1 ACTIFSUB { ATagTitle.field = title ATagParams = class="dropdown-toggle act" data-toggle="dropdown" role="button" aria-expanded="false" linkWrap = |<b class="caret"></b> ATagBeforeWrap = 1 wrapItemAndSub = <li class="dropdown">|</li> } } 2 < .1 2 { wrap = <ul class="dropdown-menu">|</ul> SPC = 1 SPC { wrapItemAndSub.cObject = COA wrapItemAndSub.cObject { # Keine Trennline, falls erster Menüpunkt dieser Ebene: 10 = TEXT 10.value = <li class="dropdown-header">|</li> 10.if.value.data = register:count_MENUOBJ 10.if.equals = 1 # ansonsten: 20 = TEXT 20.value = <li class="divider"></li><li class="dropdown-header">|</li> 20.if.value.data = register:count_MENUOBJ 20.if.equals = 1 20.if.negate = 1 } } } } }
Erweiterung der Navbar um weitere Ebenen.
Quelle: http://bootsnipp.com/snippets/featured/multi-level-navbar-menu
TypoScript:
lib.bootstrapNav = COA lib.bootstrapNav { wrap = <nav class="navbar navbar-default navbar-static-top"> <div class="container"> | </div> </nav> 10 = COA 10 { wrap = <div class="navbar-header"> | </div> 10 = COA 10 { # Hamburger-Icon: wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button> 10 = TEXT 10.value = <span class="sr-only">Toggle navigation</span> 20 = TEXT 20.value = <span class="icon-bar"></span> 21 < .20 22 < .20 } # Firmenlogo: 20 = TEXT 20.value = Projektname 20.typolink { parameter = http://www.example.org/ ATagParams = class="navbar-brand" } } 20 = HMENU 20 { special = directory special.value = 11 wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div> 1 = TMENU 1 { expAll = 1 NO = 1 NO { ATagTitle.field = title wrapItemAndSub = <li>|</li> } CUR = 1 CUR { ATagTitle.field = title wrapItemAndSub = <li class="act">|</li> } ACT < .CUR IFSUB = 1 IFSUB { ATagTitle.field = title ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" linkWrap = |<b class="caret"></b> ATagBeforeWrap = 1 wrapItemAndSub = <li class="dropdown">|</li> } ACTIFSUB = 1 ACTIFSUB { ATagTitle.field = title ATagParams = class="dropdown-toggle act" data-toggle="dropdown" role="button" aria-expanded="false" linkWrap = |<b class="caret"></b> ATagBeforeWrap = 1 wrapItemAndSub = <li class="dropdown">|</li> } } 2 < .1 2 { wrap = <ul class="dropdown-menu">|</ul> IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li> IFSUB.linkWrap > ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li> ACTIFSUB.linkWrap > SPC = 1 SPC { wrapItemAndSub.cObject = COA wrapItemAndSub.cObject { # Keine Trennline, falls erster Menüpunkt dieser Ebene: 10 = TEXT 10.value = <li class="dropdown-header">|</li> 10.if.value.data = register:count_MENUOBJ 10.if.equals = 1 # ansonsten: 20 = TEXT 20.value = <li class="divider"></li><li class="dropdown-header">|</li> 20.if.value.data = register:count_MENUOBJ 20.if.equals = 1 20.if.negate = 1 } } } 3 < .2 4 < .2 5 < .2 } }
CSS:
.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
JavaScript:
$(document).ready( function() { $("li.dropdown-submenu > a").on("click", function(){ $("li.dropdown-submenu").removeClass("active"); $(this).parent().addClass("active"); return false; }); });
