Dieses Snippet baut eine linksbündige Seitennavigation sowie ein rechtsbündiges Sprachmenü auf. In der Mobilansicht sind beide Menüs über denselben Menübutton (Hamburger-Icon) aufrufbar.
Das Icon des Sprachmenüs entstammt den Google Material Icons.
Die ID der aktuellen Seite wird beim Wechsel der Sprache beibehalten.
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>
}
}
}
}
}