A better mobile menu with Mmenu

Are you looking for a better mobile menu? Something with a better navigation than the menu elements of Oxygen?

Mmenu-Light is a really good alternative.

There are actually 2 other versions of Mmenu : the full version and a WordPress plugin.
For both of them, you need to buy a license. So we only focus on the light (free) version but feel free to use the full version if you want more options.

First thing first, go to the Github page to download the Source code.
Enqueue the mmenu-light.js and mmenu-light.css files. (With Advanced Scripts or any other method).

Then add a button or a link, with #mmenu for the URL, just like that one:

Adding the code

Mmenu will create everything for you : The navigation and the off-canvas drawer.

In a Code Block, add this code. You just have to change the menu ID by your menu's ID :

<nav id="mmenu">
<?php 
wp_nav_menu([
	'menu' => 1,
	'container' => 'ul'
]);
?>
</nav>

You should already see your menu, like this :

In the same Code Block, add this JS code:

document.addEventListener(
    "DOMContentLoaded", () => {
        const menu = new MmenuLight(
            document.querySelector("#mmenu")
        );

        const navigator = menu.navigation({
            slidingSubmenus: true,
            theme: 'light',
            title: 'Menu'
        });
        const drawer = menu.offcanvas({
            // position: 'left'
        });

        document.querySelector('a[href="#mmenu"]')
            .addEventListener('click', (evnt) => {
                evnt.preventDefault();
                drawer.open();
            });

    }
);

Click on your button to test if it works.

On page load, the menu will appear briefly, before disappearing.
We just have to hide it by setting the Display property of the Code Block to None:

Fixing the Links

By default, the sub-menus links will look like this :

In order to create a sub-menu with WordPress, we have to add Custom Links with a # as a URL.
We can remove those links by adding this JS code (still in the same Code Block) :

(function($) {
$('#mmenu li > a[href="#"]').each(function(e){
	$(this).contents().unwrap().wrap("<span></span>")
})
})( jQuery );

So now the full row is clickable :

Note

If you want to add the menu in your own off-canvas (like a Modal) or in a Div, we just have to use this JS code instead:

(function($) {
$('#mmenu li > a[href="#"]').each(function(e){
	$(this).contents().unwrap().wrap("<span></span>")
})
})( jQuery );

document.addEventListener(
    "DOMContentLoaded", () => {
        const menu = new MmenuLight(
            document.querySelector("#mmenu")
        );

        const navigator = menu.navigation({
            slidingSubmenus: true,
            theme: 'dark',
            title: 'Menu'
        });
    }
);

And we have to set a height for the Code Block :

Click on the button to see the menu in action in a Modal element.

More info about the wp_nav_menu function : https://developer.wordpress.org/reference/functions/wp_nav_menu/

More info about Mmenu : https://mmenujs.com/