The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.

Overview

mmenu.js

The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customizable through a wide range of options, extensions and add-ons and it will always fit your needs.

Need help? Have a look at the documentation for demos, tutorials, documentation and support.
Working on a WordPress site? Check out the mmenu WordPress plugin.

mmenu.js

Licence

The mmenu javascript plugin is licensed under the CC-BY-NC-4.0 license.
You can purchase a license if you want to use it in a commercial project.

Learn more

Browser support

As of version 8, the mmenu.js plugin only supports ECMAScript 6 compliant browsers.
For Internet Explorer 10 and 11, you''ll need some polyfills.
Version 7 should work to some degree in Internet Explorer 9, but you'll need a matchMedia polyfill, version 6 should work in Internet Explorer 9 without any shortcomings.

Development

This project uses Gulp(4) to compile, minify and concatenate the TS/JS and SCSS/CSS files. If you are unfamiliar with Gulp, check this tutorial on how to get started.
Run gulp watch in the command-line to put a watch on the files and run all scripts immediately after saving your changes.

Comments
  • Slowness in deeply nested menus

    Slowness in deeply nested menus

    Hi, first of all, I want to thank you for #61 and also for this great plug-in, the effort you put into it is greatly appreciated.

    I'm not sure if my problem has a concrete solution, but with deeply nested menus (4 to 5 levels deep) I'm noticing some severe slowness in the opening/closing of the menu. If I remove the sub-levels, the speed is almost equivalent to the jqmobile demo on your site. Are there any CSS/JS tweaks available to speed this up?

    Thanks again.

    opened by AliUz 27
  • Scroll bug on iPhone 6 / iOS 8

    Scroll bug on iPhone 6 / iOS 8

    Regularly when scrolling on the menu, the menu doesn't move but the page content does instead. It is as if the focus is still on the content and not on the menu.

    Only way to get the menu to scroll when this happen is to close and reopen the menu or to keep scrolling until the menu randomly get the focus.

    Does only happen on iPhone/iPods with iOS 8, not on Android. I have no min-height set, nor changed the css of mmenu.

    Happens also on the demo page: http://mmenu.frebsite.nl/demo/index.html?demo=menu-onepage (Even if the menu is not long enough to be scrollable, I think it is the same issue)

    Any ideas ?

    enhancement 
    opened by renouille 25
  • accessibility issues regarding empty links (e.g., used for next indicators)

    accessibility issues regarding empty links (e.g., used for next indicators)

    we are using the wave web tool (accessibility tool) to verify our site and are finding numerous errors because of the empty links associated with the styling of the next indicators.

    If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.

    this raises another accessibility flag and without accessible links we won't be able to deploy this on our sites.

    is it possible to please add accessible text for all links? thanks!

    opened by marthasa 19
  • using demo in asp.net web forms cause a non return values to my controls in code behind

    using demo in asp.net web forms cause a non return values to my controls in code behind

    Hi, I have used the mmenu demo in my web application. I have a search button that should return to me a text value. When I stopped the mmenu.js from my page and now I m obtained the value.

    master page:

    ...

    In code behind I have a break point but with no value for text page

    opened by eliesaber 18
  • Duplicating Forms

    Duplicating Forms

    For some reason my forms are being duplicated when I use this plugin. Can someone please let me know what's wrong? Here is my url - http://www.episcopalretirement.com/?hs_preview=r3aKllPT-2286019411

    In the footer there should only be one form but it's duplicating for some reason:( The menu is visible when viewing in tablet or phone view. I have inspected the elements in chrome but I don't see any issues in the console. Thanks for any help!

    opened by andrewrogersroi 17
  • Last update creates new problems when more menu are on the same context

    Last update creates new problems when more menu are on the same context

    Hi FrDH I have two menus into a website, both into the "body" context with firebug I can see that one menu has its "ul" with classes from mm-0 to mm-4 and the other one has its "ul" with classes from mm-5 to mm-13. I think the problem is due from these numeration, because if I disable one menu, the other one works without problems.

    The problem is on only one left arrow, the others are shown well: I start from the root level (mm-5 list), then I go eg. into its sub-menu (mm-6) at this point the left arrow is present, then if I go to another level (mm-7) and I return to the previous one (mm-6) the left arrow is disappear and from here I can't return to the mm-5.

    This problem is not present with the previous mmenu version that I've used (I think 2 weeks ago, it should be the 4.6.3). Probably the issue comes from this change https://github.com/BeSite/jQuery.mmenu/commit/40388923ae545ac982ca2933047e28d6c1366eaa

    Excuse me if I have not made an example on jsfiddle but i don't know if I can reproduce this issue on it, if you want I can show it on my test website.

    bye

    opened by maofree 17
  • Simple method to implement mmenu in WordPress

    Simple method to implement mmenu in WordPress

    Hello everyone,

    First of all, a BIG BRAVO, and a million thanks to the developer of mmenu. Since I've searched a lot and didn't found a tutorial on how to do it, i made multiple tests and finally found a simple solution. I really think that WordPress is great because a lot of persons are ready to share knowledge for free like the author of this great and cool plugin. My contribution to this plugin, is how to implement it in WordPress, so let's go !

    1- In your theme folder, create a new folder mmenu and put inside it the two main files jquery.mmenu.min.all.js and jquery.mmenu.all.css then enqueue scripts in a function in your functions.php file

    function mmenu_scripts() {
    wp_enqueue_script( 'jquery-mmenu-min-all-js', get_template_directory_uri() . '/mmenu/jquery.mmenu.min.all.js', array('jquery'), '4.7.5', false );
    wp_enqueue_style( 'jquery-mmenu-all-style', get_template_directory_uri() . '/mmenu/jquery.mmenu.all.css' );
    }
    add_action( 'wp_enqueue_scripts', 'mmenu_scripts' );
    

    2- In header.php JUST UNDER <body <?php body_class(); ?>> put the following code

    <script type="text/javascript">
      (function ($) {
         $(document).ready(function() {
            $("nav#menu").mmenu({
               "classes": "mm-slide mm-light",
               "counters": true,
               "footer": {
                  "add": true,
                  "title": "Footer"
               },
               "header": true,
               "searchfield": true,
               "offCanvas": {
                  "zposition": "front"
                   }
            });
         });
         })(jQuery);
    </script>
    

    PAY ATTENTION TO LINE 4 $("nav#menu") This line is assuming that your menu is wrapped in a <nav> that have an id of menu ! So let's create the wp_nav_menu for this one.

    3- In footer.php JUST BEFORE <?php wp_footer(); ?> put the following code

    <nav id="menu">
        <?php wp_nav_menu( array( 
        'theme_location' => 'primary',
        'container' => false,
        ) ); ?>
    </nav>
    

    PAY ATTENTION TO LINE 3 'theme_location' => 'primary' This line is assuming that you are assigning/using the primary location menu. You should not remove the 'container' => false line, because it prevents WordPress from wrapping your menu with a <div> !

    4- After adding some menu items to the primary location in the back-end of WP, you just have to add a single line to see the magic in action. In header.php, you can put under the opening <header> tag the following line

    <a href="#menu">Open the menu</a>
    

    Now you will see a link in the header of the theme a Open the menu link, just click it :wink:

    Finally, you can play with the options of the plugin as you want and style the link that open the menu to be an icon like the hamburger on the site of mmenu plugin.

    Hope that someone will benefit from this very simple integration and make a cool WP menu with mmenu !

    opened by LebCit 16
  • Weird conflict with Twitter feed widget (body disappearing)

    Weird conflict with Twitter feed widget (body disappearing)

    I ran into a strange conflict where my Twitter feed widget was appearing and then quickly disappearing. I'm currently using Mmenu version 7.2.2, but I have tested it with 7.2.3 and it is still occurring.

    When the Twitter feed disappears I can see that inside of the iframe, the body tag is empty, so: <body></body>.

    screen shot 2019-02-14 at 5 05 16 pm

    After chasing it around for a while I found that it was the .mmenu() function that was causing it. I don't know what specifically in there is the problem, but when I revert to Mmenu version 6.1.8 it works as expected.

    I am calling the .mmenu() function from window load if that helps diagnosis this at all. Technically, I'm lazyloading the script by waiting for window load then GETing all.js from CDNJS then calling the function which runs the Mmenu logic. I'll see if I can create an eloborate Codepen to try to recreate this setup.

    Here's the Twitter widget code for reference:

    <a class="twitter-timeline" data-lang="en" data-height="800" data-link-color="#00a1d6" href="https://twitter.com/PinckneyHugo?ref_src=twsrc%5Etfw">Tweets by Pinckney Hugo Group</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    

    Edit: I'm having difficulty recreating this. On Codepen it works fine even with my convoluted lazyloading... https://codepen.io/chrisblakley/pen/rPqOYg

    The problem is visible here (or rather, invisible) under the sidebar on the right side: https://gearside.com/nebula/get-started/checklists/

    opened by chrisblakley 15
  • inferior performance with

    inferior performance with "left" instead of "translateX"

    I am reviewing several offcanvas menu's including mmenu. Mmenu has some nice features, including the submenus nav, but it has one major disadvantage compared to the other good offcanvas plugins: By default, transitions are assigned with the "left" position instead of a transform "translateX". There is a major difference in how browsers handle animations with "left" position vs transform (render layers and GPU support), so I strongly recommend changing from left to transform: translateX.

    opened by mjau-mjau 15
  • Upgrade from `8.5.24` to `9.0.1` breaks Mmenu on all sites for me.

    Upgrade from `8.5.24` to `9.0.1` breaks Mmenu on all sites for me.

    All Menus will not close when clicking on the dimmed portion of the screen.

    import 'mmenu-js';
    document.addEventListener(
      "DOMContentLoaded", () => {
        const menu = new Mmenu("#mobile-menu", {
          extensions: ["position-right", "pagedim-black", "shadow-page", "theme-light", "position-front"],
        });
        const api = menu.API;
    
        document.querySelector("#mburger")
          .addEventListener(
            "click", (evnt) => {
              evnt.preventDefault();
              api.open();
            }
          );
      }
    );
    

    The mm-wrapper__blocker element changes from a div to an a in the new version, and doesn't respond to any clicks. Nothing is logged. Escape key still exits.

    Is there any further info I can provide?

    Rolling back to 8.5.24 sorts things.

    opened by sjclark 14
  • Can't close sidebar menu on desktop

    Can't close sidebar menu on desktop

    I'm trying to recreate something similar to the mmenu.js demo, which starts with an open sidebar menu but which can be collapsed upon clicking the hamburger/X menu. The menu is working perfectly in almost every way, except that clicking the X doesn't collapse the sidebar. What am I missing/doing wrong?

    My menu code:

    document.addEventListener(
            "DOMContentLoaded", () => {
                new Mmenu( "#menu", {
    	            columns: false,
                    
                    sidebar: {
                                collapsed: {
                                    use: 768,
                                    hideNavbar: !0,
                                    hideDivider: !0
                                },
                                expanded: {
                                    use: 1440,
                                    initial: "remember"
                                }
                            },
                    navbar: {
                        title: "The Emergent Game"
                    }
                });
            }
        );
    

    You can see a reduced case instance of the menu here: [https://emergentgame.com/freeplay-reduced-case.php]

    Grateful for any help!

    opened by jennykb 14
  • Search isn't full working when using with React

    Search isn't full working when using with React

    Hello,

    Thanks for this awesome plugin @FrDH . I'm using it with React but I'm faced with an issue. If we need to use some function on a menu item, when search if performed, function is removed. See this codesandbox to understand : https://codesandbox.io/s/gracious-chatelet-ymexwo?file=/src/App.js As you can see, the very first element is used to show a basic javascript alert. If you click, it works. Now, search for "Alert" and you'll find the item again, but when you try clicking on it, function doesn't seems to be reachable again.

    I'm try to figure out why in source code, but if you have a clue, please share ;) Thanks.

    opened by Nicolas-PredictaLab 0
  • ARIA role should be appropriate for the element.

    ARIA role should be appropriate for the element.

    Hi , There are two empty buttons; one with a class of mm-tabstart and the other with a class of mm-tabend. These buttons has role presentation which causes the flag them as an accessibility issue.

    mmenu
    opened by gawalin 3
  • Spanish translation

    Spanish translation

    Hi! First thanks for your amazing menu! I'd like to contribute with Spanish translation, similar to #1323. Let me know if you are interested 😄

    Greetings!

    opened by ppizarror 1
  • Menu has no parent container

    Menu has no parent container

    I need to wrap #menu in a parent container. With the current approach you can't do any customizations to #menu involving margin or position top left bottom . In older versions this was possible, now it is not. I wonder why. Anyway I would like to know how I can add a wrapper to #menu. Thanks.

    <div class="wrapper>
    <nav id="menu"></nav>
    <a class="mm-wrapper__blocker mm-blocker mm-slideout" id="mm-0"></a>
    </div>
    
    opened by thagxt 2
  • There is no working example with offcanvas disabled

    There is no working example with offcanvas disabled

    There is no working example with offcanvas disabled. I disabled it using the API present in the documentation, but when disabled the entire menu is broken.

    opened by dgateles 4
  • Enabled back button functionality manipulates current url-path

    Enabled back button functionality manipulates current url-path

    Hi!

    We are using the menu and wanted to enable the back button feature. But it leads to some weird behaviour by removing the url-path.

    Our code (we use Vite):

    // @ts-ignore
    import Mmenu from 'mmenu-js/src/mmenu';
    document.addEventListener('DOMContentLoaded', () => {
        (window as any).mobileNav = new Mmenu('#mobile-nav', {
            backButton: {
                close: true,
            }
        }, {});
    });
    

    I recorded a short video to show the behaviour:

    https://user-images.githubusercontent.com/1436383/203767808-a38514bb-ae74-405b-81e4-d140838b751d.mov

    opened by vandres 2
Releases(v9.3.0)
Owner
Fred Heusschen
I'm a creative front-end developer, I like JS and CSS and working with related toolsets and frameworks. Full bio: http://frebsite.nl/cv-en.html
Fred Heusschen
Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.

Slidebars Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which feat

Adam Smith 1.5k Jan 2, 2023
Quick access menu for the GNOME panel with options that help ease the workflow for newcomers and power users alike.

Tofu Menu (formerly Fedora Menu) Quick access menu for the GNOME panel with options that help ease the workflow for newcomers and power users alike. S

null 19 Sep 26, 2022
:zap: A sliding swipe menu that works with touchSwipe library.

Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff

Joan Claret 138 Sep 27, 2022
stickUp a jQuery Plugin for sticky navigation menus.

stickUp a jQuery plugin A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view.

null 1.6k Dec 31, 2022
Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

jQuery Superfish Dropdown Menu Plugin Our favourite aquatic superhero returns from his sojourn across the galaxy infused with astonishing, hitherto un

Joel Birch 917 Dec 9, 2022
A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

#jPanelMenu ###Version 1.4.1 jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content. Check out the demo (and documentation)

Anthony Colangelo 927 Dec 14, 2022
jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.

jQuery-menu-aim menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to na

Ben Kamens 7.7k Dec 30, 2022
jQuery contextMenu plugin & polyfill

jQuery contextMenu plugin & polyfill $.contextMenu is a management facility for - you guessed it - context menus. It was designed for an application w

SWIS 2.2k Dec 29, 2022
MultiLevelPushMenu jQuery Plugin implementation

Multi-level-push-menu by Momcilo Dzunic This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms a

Momcilo Dzunic 808 Dec 21, 2022
A touch slideout navigation menu for your mobile web apps.

Slideout.js A touch slideout navigation menu for your mobile web apps. Features Dependency-free. Simple markup. Native scrolling. Easy customization.

Mango 8k Jan 3, 2023
Sidebar-skeleton - Simple and fast sidebar skeleton on Bootstrap

Compostrap Simple and fast components build on Bootstrap Sidebar skeleton Simple and fast sidebar skeleton. Installation npm install --save sidebar-sk

Compostrap 4 May 6, 2022
Tippyjs - Tooltip, popover, dropdown, and menu library

Tippy.js The complete tooltip, popover, dropdown, and menu solution for the web Demo and Documentation ➡️ View the latest demo & docs here Migration G

James N 10.5k Dec 28, 2022
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.

mmenu.js The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customiz

Fred Heusschen 2.6k Dec 27, 2022
Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.

Slidebars Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which feat

Adam Smith 1.5k Jan 2, 2023
The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.

mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples

Fred Heusschen 172 Dec 12, 2022
stackoverflow look-alike with only the questions section

q&a forum! Description Made this project in education purpose and to have something to show in my portfolio. I copied parts of stackoverflows design b

William Eliasson 5 Oct 24, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Rik Roots 227 Dec 31, 2022
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023