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> } 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> } } } } }