Die Navbar wird um weitere Ebenen erweitert. Basiert auf SmartMenus jQuery, daher gibt es ein paar Änderungen im Markup (z.B. kein data-toggle="dropdown").
Zusätzlich zum Standard-Bootstrap werden folgende Dateien benötigt:
Weitere Demo: SmartMenus jQuery Website Menu - Bootstrap Addon
Funktionsweise: In der Mobilansicht offenbart der erste Klick auf einen Menüpunkt mit Unterseiten die Unterebene. Klickt man ein zweites Mal auf den gleichen Menüpunkt, wird die dort verlinkte Seite geladen (funktioniert nur bis einschließlich Version 1.0.1). Die Unterebene kann mit dem sub-arrow-Button wieder geschlossen werden.
lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
wrap = <nav class="navbar navbar-default" role="navigation"> <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" data-toggle="collapse" data-target=".navbar-collapse"> | </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 = COA
20 {
wrap = <div class="navbar-collapse collapse"> | </div>
10 = HMENU
10 {
wrap = <ul class="nav navbar-nav"> | </ul>
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>
}
IFSUB = 1
IFSUB {
ATagTitle.field = title
ATagParams = class="sub-arrow"
linkWrap = |<span class="caret"></span>
ATagBeforeWrap = 1
wrapItemAndSub = <li>|</li>
}
CURIFSUB < .IFSUB
CURIFSUB {
wrapItemAndSub = <li class="active">|</li>
}
ACT < .CUR
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>
}
}
2 < .1
2 {
wrap = <ul class="dropdown-menu">|</ul>
}
3 < .2
4 < .3
}
}
}