New in 8.4

Slimmed down & beefed up

In order to prevent the plugin from becomming bloated and to keep it maintainable, we've slimmed down on parts that aren't used much or are easy to imitate. We also added a .js file with the needed polyfills for old browsers like IE11 and added fallbacks for the CSS variables.

For the full list of all changes, go ahead and check out the changelog.

Options, extensions and add-ons

We've added some options and made changes to some of the add-ons.
Go ahead and check out the options and the dividers and drag add-ons.

Mobile menu sticky navbar Sticky navbars
Thanks to the improved CSS framework, all navbars are now sticky by default, using native browser support.

Mobile menu dividers add-on Sticky dividers
Thanks to the improved dividers add-on, all dividers are now sticky by default, using native browser support.

Mobile menu drag add-on Drag the menu open
With the new and improved, dependency free, drag add-on.

Under the hood

You might not even notice...
But in version 8, we did some serious refactoring to keep the mmenu.js plugin future proof, and we the result!

jQuery is no longer required.
The mmenu.js plugin is now dependency free, every single line of code has been rewritten in vanilla JavaScript. This means all API methods (and hooks) that took a jQuery object as an argument, now take a HTMLElement or an array of HTMLElements as an argument.

Version 7
<script>
    $(document).ready(
        function() {
            // Fire the plugin
            var $menu = $("#my-menu").mmenu();

            // Get the API
            var api = $menu.data( "mmenu" );

            // Invoke a method
            api.openPanel( $("#my-panel") );
        }
    );
</script>

Version 8
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            // Fire the plugin
            const menu = new Mmenu( "#my-menu" );

            // Get the API
            const api = menu.API;

            // Invoke a method
            const panel = document.querySelector( "#my-panel" );
            api.openPanel( panel );
        }
    );
</script>

ES6 Module & webpack
The entire plugin is now written and can be used as an EcmaScript 2015 module. Webpack transpiles it back to an oldfashioned JavaScript file.

ES6 Class
Although Typescript transpiles it back to a prototype-based inheritance model, the mmenu.js plugin is now written as an EcmaScript 2015 class.

Typescript typings
To fully utilize the power of Typescript, all JavaScript in the plugin is now typed. This makes writing new code a lot easier and less error-prone.

Annotation
All (well, most) JavaScript in the plugin has also been properly annotated. This too makes writing new code a lot easier and less error-prone.

Gulp update
The mmenu.js plugin now uses Gulp v4 to compile, transpile, minify and concatenate the Typescript into javascript and the SCSS into CSS.

Meet the family

Animated hamburgers, sticky headers, a lightweight version and a WordPress plugin.

Animated hamburger icon Animated hamburgers
A small collection of animated hamburgers. All set up to work out of the box with the mmenu.js plugin.

Sticky headers
Eye-catching sticky headers for mobile websites and web-apps, completely in style and fully compatible with the mmenu.js plugin.

Lightweight mobile menu Mmenu Light
The (extremely) lightweight alternative, with the exact look and feel of the mmenu.js plugin.

Lightweight mobile menu WordPress plugin
All the power and beauty of the mmenu.js plugin, implemented into an easy to use, plug-and-play WordPress environment.

Mobile menu Sketch design Sketch design file
Download the mmenu Sketch design file and start integrating mmenu in your designs.

The changelog

For the full list of all changes, go ahead and check out the changelog.

mmenu.js mmenu light WordPress plugin Sticky headers Hamburgers