jQuery.mmenu: Sliding submenus, off-canvas

jQuery.mmenu ist eine umfangreich konfigurierbare Off-canvas-Navigation. Die Unterseiten können u.a. über einen Slide-Effekt durchgeblättert werden. Hier wurde die jQuery.mmenu-Erweiterung widescreen verwendet, um das Menü bei entsprechender Breite dauerhaft anzuzeigen.

Das HMENU muss nur wenig Klassen vergeben, die meisten setzt das JavaScript des Menüs selbst. Wichtig ist die ID des Menüs (frei wählbar), die bei der Initialisierung des Menüs über jQuery angesprochen wird.

Wenn das Listenelement der aktiven Seite die richtige Klasse erhält (Standard: .Selected, hier angepasst: .active), startet das Menü direkt auf dieser Ebene.

Auch das Trennzeichen des TYPO3-Seitenbaums kann einfach ausgegeben werden – über die (Standard-)Klasse .Divider.

TypoScript des Menüs:

lib.navigation-mmenu = HMENU
lib.navigation-mmenu {
    wrap = <nav id="mmenu">|</nav>

    1 = TMENU
    1 {
        expAll = 1
        wrap = <ul>|</ul>

        NO = 1
        NO {
            ATagTitle.field = title
            wrapItemAndSub = <li>|</li>
        }

        CUR < .NO
        CUR {
            ATagTitle.field = title
            // default value for jQuery.mmenu is not 'active', but 'Selected'! See explanation above.
            wrapItemAndSub = <li class="active">|</li>
        }

        IFSUB = 1
        IFSUB {
            ATagTitle.field = title
            wrapItemAndSub = <li>|</li>
        }

        CURIFSUB < .IFSUB
        CURIFSUB {
            ATagTitle.field = title
            wrapItemAndSub = <li class="active">|</li>
        }

        SPC = 1
        SPC {
            wrapItemAndSub = <li class="Divider">|</li>
        }
    }

    2 < .1
    3 < .2
    4 < .3
}

JavaScript:

jQuery(document).ready(function ($) {
    // fire jQuery.mmenu:
    $("#mmenu").mmenu({
        // options
        "extensions": [
            "effect-slide-menu",
            "widescreen",
            "multiline"
        ],
        navbar: {
            title: 'Navigation'
        },
        "navbars": [
            {
                "position": "top",
                "content": [
                    "prev",
                    "title",
                    "close"
                ]
            }
        ]
    }, {
        // configuration
        offCanvas: {
            menuWrapperSelector: ".wrapper",
            pageNodetype: "div",
            pageSelector: ".page-wrap"
        },
        classNames: {
            selected: "active"
        }
    });
});