This snippet builds a page navigation on the left and a language menu on the right. In mobile view both menus are accessible via the same menu button (hamburger icon).
The icon for the language menu is taken from the Google Material Icons.
When changing the language, the ID of the current page is kept.
lib.bootstrap3-language = COA
lib.bootstrap3-language {
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 = COA
20 {
wrap = <div id="navbar" class="navbar-collapse collapse"> | </div>
// page menu:
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>
}
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>
}
}
}
// language menu:
20 = HMENU
20 {
special = language
special.value = 0,1
addQueryString = 1
addQueryString.exclude = id
addQueryString.method = GET
wrap = <ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="ic-language"></span> <span class="caret"></span></a>|</li></ul>
1 = TMENU
1 {
wrap = <ul class="dropdown-menu" role="menu">|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.cObject = TEXT
stdWrap.cObject {
value = Deutsch || English
}
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
}
}
}
}