A Sass-built navigation which uses the Checkbox Hack to create a responsive, mobile-friendly multi-level navigation. No JavaScript needed. Based on this tutorial from W3Bits, but significantly streamlined in markup and styling. Easily customizable through Sass variables. The checkboxNav package on GitHub comes with source files as well as two example themes.
This demo shows the menu with a hamburger icon and circular labels.
About the TypoScript: The for attribute of the label has to match the ID of the checkbox and has to be unique, too. To achieve this, I use subst_elementUid inside IFSUB to substitute the string {elementUid} with the uid number of the menu item for both label and checkbox.
lib.checkboxNavHamburger = COA
lib.checkboxNavHamburger {
wrap = <nav class="cbnav">|</nav>
10 = HMENU
10 {
wrap = <label for="toggle" class="c-hamburger"><span class="c-hamburger__icon"></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
}