The Navbar is extended by more sublevels. This is based on SmartMenus jQuery, therefore some changes to the markup must be made (e.g. no more data-toggle="dropdown").
In addition to the default Bootstrap files, these CSS and JavaScripts must be used:
Additional demo: SmartMenus jQuery Website Menu - Bootstrap Addon
Functionality: In mobile view the first click on a menu item with subpages opens the submenu level. If you click a second time on the same menu item, it follows the associated link (only works up to and including version 1.0.1). You can use the sub-arrow buttons to close the submenu again, though.
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
}
}
}