Skip to Content

mmenus()

This function initializes the Mmenu library with advanced settings.

JavaScript July 2, 2019

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/nebula.js on line 5254.

Note: This function contains 9 to-do comments.

JavaScript
nebula.mmenus = function(){
    //@todo "Nebula" 0: Between Mmenu and jQuery, 2 console violations are being triggered: "Added non-passive event listener to a scroll-blocking 'touchmove' event."
        //This happens whether this function is triggered on DOM ready or Window load

    if ( 'mmenu' in jQuery ){ //Ensure Mmenu library has loaded
        var mobileNav = jQuery('#mobilenav'); //This is essential, so check it here in case this function is called manually

        if ( mobileNav.length ){
            //Navigation Panels
            var navPanels = {};
            var currentPageClass = 'current-menu-item'; //This is a temporary fix until we upgrade to Mmenu 8!

            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 mobile menu via a class
                navPanels = {
                    position: "top",
                    type: "tabs",
                    content: [
                        "<a href='#main-panel'>Main Menu</a>",
                        "<a href='#utility-panel'>Other Links</a>"
                    ]
                };

                currentPageClass = 'this-intentionally-left-blank'; //This is a temporary fix until we upgrade to Mmenu 8! This prevents utility nav pages from using the current page class. (This must be a non-empty string in order to not error)
            }

            //Add social links to footer of Mmenu
            var footerIconLinks = {};
            if ( nebula.has(nebula, 'site.options') ){ //@todo "Nebula" 0: Replace with optional chaining (may not need this conditional)
                footerIconLinks = {
                    position: "bottom",
                    content: []
                };
                if ( nebula.site.options.facebook_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.facebook_url + '" target="_blank" rel="noopener"><i class="fab fa-facebook"></i></a>');
                }

                if ( nebula.site.options.twitter_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.twitter_url + '" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>');
                }

                if ( nebula.site.options.instagram_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.instagram + '" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>');
                }

                if ( nebula.site.options.linkedin_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.linkedin_url + '" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>');
                }

                if ( nebula.site.options.youtube_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.youtube_url + '" target="_blank" rel="noopener"><i class="fab fa-youtube"></i></a>');
                }

                if ( nebula.site.options.pinterest_url ){ //@todo "Nebula" 0: Use optional chaining
                    footerIconLinks.content.push('<a href="' + nebula.site.options.pinterest_url + '" target="_blank" rel="noopener"><i class="fab fa-pinterest"></i></a>');
                }

                if ( footerIconLinks.content.length > 0 ){
                    footerIconLinks.content.splice(0, 0, '<a href="' + nebula.site.home_url + '"><i class="fas fa-home"></i></a>'); //Insert into beginning of array
                }
            }

            //Initialize Mmenu options and configuration
            mobileNav.mmenu({
                //Options
                navbars: [{
                    position: "top",
                    content: ["searchfield"],
                },
                navPanels,
                footerIconLinks
                ],
                searchfield: {
                    add: true,
                    search: true,
                    placeholder: 'Search',
                    noResults: "No navigation items found.",
                    showSubPanels: false,
                    showTextItems: false,
                    resultsPanel: true,
                },
                counters: true, //Display count of sub-menus
                iconPanels: true, //Layer panels on top of each other
                backButton: {
                    close: true //Close the Mmenu on back button click
                },
                extensions: [
                    "position-back", //Push the page content
                    "position-left", //Left side of page
                    "theme-light", //Light background
                    //"fx-listitems-slide", //Animated list items //@todo "Nebula" 0: Test if this is is laggy on mobile devices
                    "shadow-page", //Add shadow to the page
                    "shadow-panels", //Add shadow to menu panels
                    "listview-huge", //Larger list items
                    "multiline" //Wrap long titles
                ],
            }, {
                //Configuration
                offCanvas: {
                    page: {
                        selector: "#body-wrapper"
                    }
                },
                classNames: {
                    selected: currentPageClass //This breaks when viewing a utility nav subpage– the panel gets stuck open. So we only use it when no utility nav is not being used.
                },
                searchfield: {
                    clear: true,
                    form: {
                        method: "get",
                        action: nebula.site.home_url,
                    },
                    input: {
                        name: "s",
                    }
                }
            }); //Initialize Mmenu

            if ( mobileNav.length ){
                var mobileNavTriggerIcon = jQuery('a.mobilenavtrigger i');

                mobileNav.data('mmenu').bind('open:start', function($panel){
                    //When mmenu has started opening
                    mobileNavTriggerIcon.removeClass('fa-bars').addClass('fa-times');

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

                    nebula.timer('(Nebula) Mmenu', 'start');
                }).bind('close:start', function($panel){
                    //When mmenu has started closing
                    mobileNavTriggerIcon.removeClass('fa-times').addClass('fa-bars');
                    ga('send', 'timing', 'Mmenu', 'Closed', Math.round(nebula.timer('(Nebula) Mmenu', 'lap')), 'From opening mmenu until closing mmenu');
                });
            }

            nebula.dom.document.on('click', '.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.
}