Die bekannte Navbar von Bootstrap 3, mit 2 Menüebenen.
Dieses TypoScript erstellt die komplette Navbar inklusive Firmenname. Bei Verwendung des Menü-Trennzeichens (SPC) wird dieses als Menü-Header ausgegeben (nicht wählbare Überschrift im Menü). Über dem Header wird eine Trennlinie eingefügt, außer es ist der erste Menüpunkt auf dieser Ebene.
Für die Abwandlungen Static top (.navbar-static-top) und Fixed top (.navbar-fixed-top) brauchst du nur die entsprechende Klasse im <nav>-Element ergänzen.
Benenne die Klasse .container-fluid in .container um, falls du das adaptive Layout verwenden möchtest.
lib.bootstrap3-basic = COA
lib.bootstrap3-basic {
wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </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
}
// company name/logo:
20 = TEXT
20.value = Project name
20.typolink {
parameter = https://www.example.org/
ATagParams = class="navbar-brand"
}
}
20 = HMENU
20 {
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>
// Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
wrapItemAndSub.override.cObject = COA
wrapItemAndSub.override.cObject {
if {
value = 4
equals.field = doktype
isTrue = 1
isTrue.if {
value.data = TSFE:page|uid
equals.field = shortcut
}
}
10 = TEXT
10.value = <li class="active">|</li>
}
}
CUR < .NO
CUR {
wrapItemAndSub = <li class="active">|</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 < .IFSUB
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active">|</li>
}
CURIFSUB < .ACTIFSUB
}
2 < .1
2 {
wrap = <ul class="dropdown-menu">|</ul>
// because default Bootstrap 3 doesn't support more submenu levels:
IFSUB >
ACTIFSUB >
CURIFSUB >
SPC = 1
SPC {
// no divider, if first menu item on this level (using optionSplit):
wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
}
}
}
}