Skip to Content

mmenus()

This function initializes the Mmenu library with advanced settings.

JavaScript February 7, 2021

Usage

JavaScript
#mobilenav

Parameters

This function does not accept any parameters. Is this incorrect?

Additional Notes

Use the ID #mobilenav on the navigation ul, and the class mobilenavtrigger on the a tag parent of the icon (if using one) to toggle the open/close icon change.

Refer to the Mmenu documentation for customization of the offcanvas menu itself.

Source File

Located in /assets/js/modules/helpers.js on line 453.

No Hooks

This function does not have any filters or actions available. Request one?
JavaScript
nebula.mmenus = async function(){
    //Ensure the offcanvas nav element exists
    let offcanvasNav = jQuery('#offcanvasnav'); //This is essential, so check it here in case this function is called manually
    if ( offcanvasNav.length ){
        let offcanvasNavTriggerIcon = jQuery('a.offcanvasnavtrigger i');

        let navbars = []; //Think of these as "rows" in the Mmenu panel

        //Add the search navbar
        navbars.push({
            position: 'top',
            content: ['searchfield'] //Add a search field to this navbar
        });

        //Add the tab navbar for the utility menu (if it exists)
        if ( jQuery('#utility-panel').length && (!jQuery('#utility-nav').hasClass('no-mobile') && !jQuery('#utility-panel').parents('.no-mobile').length) ){ //If the utility menu exists and is not manually disabled from the offcanvas menu via a class
            navbars.push({
                position: 'top',
                type: 'tabs',
                content: [
                    '<a href="#main-panel">Main Menu</a>',
                    '<a href="#utility-panel">Other Links</a>'
                ]
            });
        }

        //Add the title navbar
        navbars.push({
            position: 'top',
            content: ['prev', 'title'] //This defaults to "Menu". Can it be changed?
        });

        const offcanvasMmenu = new Mmenu('#offcanvasnav', {
            //Options
            wrappers: ['wordpress'], //This handles the "current-menu-item" selected class name automatically
            extensions: [
                'pagedim-black', //Dim the page when Mmenu is open ('-white' or '-black')
                'fx-menu-slide', //Subtly animate the menu items in too //See if this is laggy on mobile
                'multiline', //Long link text wraps to multiple links
                'shadow-panels', //Add a shadow to sub-nav panels
            ],
            offCanvas: true, //Enable the offcanvas API (for opens and closes)
            pageScroll: { //Enable smooth scrolling. May resolve #1967– if so keep it, if not remove it.
                scroll: true,
                update: true
            },
            backButton: {
                close: true //Close the offcanvas menu when the browser's back button is used
            },
            keyboardNavigation: { //This is not yet working...
                enhance: true //Allow for enhanced keyboard navigation such as the "escape" key closing the menu
            },
            lazySubmenus: {
                load: true //Lazy load the sub-nav panels
            },
            counters: true, //Add counters to show the number of sub-nav items
            iconPanels: true, //Show a small part of the parent panels (for sub-nav items)
            navbars: navbars,
            searchfield: {
                //panel: true, //This shows all search results in a single panel, but is causing an error in Mmenu 8.5.21
                showSubPanels: false
            },
            setSelected: {
                hover: true
            },
            hooks: {
                'open:start': function(){ //When Mmenu has started opening
                    offcanvasNavTriggerIcon.removeClass('fa-bars').addClass('fa-times');

                    if ( typeof jQuery.tooltip !== 'undefined' ){
                        jQuery('[data-toggle="tooltip"]').tooltip('hide');
                    }

                    nebula.timer('(Nebula) Mmenu', 'start');
                },
                'close:start': function(){ //When Mmenu has started closing
                    offcanvasNavTriggerIcon.removeClass('fa-times').addClass('fa-bars');
                    ga('send', 'timing', 'Mmenu', 'Closed', Math.round(nebula.timer('(Nebula) Mmenu', 'lap')), 'From opening mmenu until closing mmenu');
                },
            }
        }, {
            searchfield: {
                clear: true,
                form: {
                    method: 'get',
                    action: nebula.site.home_url,
                },
                input: {
                    name: 's',
                }
            }
        });

        nebula.dom.document.on('click', '#offcanvasnav .mm-menu li a:not(.mm-next)', function(){
            ga('send', 'timing', 'Mmenu', 'Navigated', Math.round(nebula.timer('(Nebula) Mmenu', 'lap')), 'From opening mmenu until navigation');
        });
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.mmenus = function(){
    //Write your own code here, leave it blank, or return false.
}