Ein Sass-basiertes Menü, welches mittels Checkbox Hack eine responsive, mobiloptimierte Multi-Level-Navigation erstellt. Basiert auf diesem (englischen) Tutorial von W3Bits, wurde aber in Markup und Styling deutlich vereinfacht. Mittels Variablen ist sie einfach an das eigene Design anzupassen. Das checkboxNav-Paket auf GitHub enthält neben den Source-Dateien auch zwei Beispiel-Themes.
Diese Demo zeigt das Menü als Leiste mit eckigen Labels.
Zum TypoScript: Das for-Attribut des Labels muss mit der ID der Checkbox übereinstimmen und darf jeweils nur einmal vorkommen. Aus diesem Grund verwende ich subst_elementUid für IFSUB, um den String {elementUid} mit der UID des Menüelements zu ersetzen und ihn so Label und Checkbox zuzuweisen.
lib.checkboxNavBar = COA
lib.checkboxNavBar {
wrap = <nav class="cbnav">|</nav>
10 = HMENU
10 {
wrap = <label for="toggle" id="toggle-menu">Navigation<span class="cbnav__label"><span class="cbnav__arrow"></span></span></label>|
1 = TMENU
1 {
expAll = 1
wrap = <input type="checkbox" id="toggle"> <ul class="cbnav__lvl--first">|</ul>
NO = 1
NO {
ATagTitle.field = title
ATagParams = class="cbnav__link--first"
wrapItemAndSub = <li class="cbnav__item">|</li>
// Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
ATagParams.override.cObject = COA
ATagParams.override.cObject {
if {
value = 4
equals.field = doktype
isTrue = 1
isTrue.if {
value.data = TSFE:page|uid
equals.field = shortcut
}
}
10 = TEXT
10.value = class="cbnav__link--first cbnav__link--active"
}
}
CUR < .NO
CUR.ATagParams = class="cbnav__link--first cbnav__link--active"
ACT < .CUR
IFSUB < .NO
IFSUB {
subst_elementUid = 1
linkWrap = |<label title="Toggle drop-down" class="cbnav__label" for="id{elementUid}"><span class="cbnav__arrow"></span></label>
ATagBeforeWrap = 1
allWrap = |<input type="checkbox" id="id{elementUid}">
}
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class="cbnav__link--first cbnav__link--active"
CURIFSUB < .ACTIFSUB
}
2 < .1
2 {
wrap = <ul class="cbnav__lvl--sub">|</ul>
NO.ATagParams = class="cbnav__link--sub"
CUR.ATagParams = class="cbnav__link--sub cbnav__link--active"
ACT < .CUR
IFSUB {
ATagParams = class="cbnav__link--sub"
linkWrap = |<label title="Toggle drop-down" class="cbnav__label" for="id{elementUid}"><span class="cbnav__arrow--sub"></span></label>
}
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class="cbnav__link--sub cbnav__link--active"
CURIFSUB < .ACTIFSUB
}
3 < .2
4 < .3
}
20 = TEXT
20.value = <a href="https://github.com/sebkln/checkboxNav"><img src="{path : EXT:sklein_demo/Resources/Public/Images/Hmenu/checkboxNav-logo-neg.svg}" alt="logo" class="logo"></a>
20.insertData = 1
}