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

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ü mit Hamburger Icon und runden 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.

TypoScript des Menüs:

lib.checkboxNavHamburger = COA
lib.checkboxNavHamburger {
    wrap = <nav class="cbnav">|</nav>

    10 = HMENU
    10 {
        wrap = <label for="toggle" id="toggle-menu"></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>
            }

            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="fileadmin/Demo/HMENU/assets/checkboxNav-logo-neg.svg" alt="logo" class="logo"></a>
}