New in 8.2

jQuery → HTMLElement

Version 8 no longer uses jQuery, instead it is written 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>

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 (well almost, the drag add-on still requires Hammer.js), every single line of code has been rewritten in vanilla JavaScript.

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.

Headers and hamburgers

Sticky headers and animated hamburgers to accompany the mmenu.js 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.

Lightweight mobile menu Mmenu Light
The (extremely) lightweight alternative, with the exact look and feel of 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.

Options, extensions and add-ons

We've added a few new options in some of the add-ons.
Go ahead and check out the dividers, iconbar and navbars add-ons.

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 navbars and iconbar add-on Responsive option
Both the iconbar and navbars add-on can now be enabled based on a media query.

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 changelog page.

mmenu.js mmenu light WordPress plugin Sticky headers Hamburgers