Currently selected page: "Pears"

checkboxNav: A CSS-only, Sass-built responsive multi-level navigation (Bar)

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 as a bar with rectangular 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.

TypoScript of navigation:

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
}