Currently selected page: "Apples"

jQuery.mmenu: Slidings submenus, off-canvas

jQuery.mmenu is a highly customizable Off-canvas navigation. A default feature are the sliding submenus. I added the jQuery.mmenu extension widescreen to permanently show the menu at a certain viewport width.

You only have to assign few classes within the HMENU, as most classes are set by the JavaScript of the menu itself. Be sure to assign the same ID of the navigation which you use during the initialization through jQuery.

If you assign the correct class to the list element of the current page (Default: .Selected, customized here to: .active), the menu starts at this subpage level.

The Spacer page type (SPC) of TYPO3 can be displayed, too. Just use the (default) class .Divider.

TypoScript of navigation:

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>

            // Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
            wrapItemAndSub.override.cObject = COA
            wrapItemAndSub.override.cObject {
                if {
                    value = 4
                    equals.field = doktype
                    isTrue = 1
                    isTrue.if {
                        value.data = TSFE:page|uid
                        equals.field = shortcut
                    }
                }

                10 = TEXT
                10.value = <li class="active">|</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: "body",
            pageNodetype: "div",
            pageSelector: ".c-site-wrapper"
        },
        classNames: {
            selected: "active"
        }
    });
});