'jquery mmenu opens by default

I've set up a new page and added jQuery.mmenu. now when I load the page the mmenu opens already by default.

mmenu is firing and adding mm-opened on the body on page load. Then the css transition kicks in and mmenu is opened nicely.

But I want it only to be opened when click on a menu button. Very strange. Anybody heard this before?

jquery:

$(document).ready(function() {
  $("#my-menu").mmenu();
});

html:

<body>
   <nav id="my-menu">
     <ul>
        <li><a href="{{item.url }}" class="no-barba">But WHy?</a></li>
     </ul>
   </nav>
  <div>//content</div>
</body>

Nothing special going on in the markup

mmenu


Solution 1:[1]

Add this to your css stylesheet and test it:

#my-menu:not(.mm-menu) {
  display: none;
}

Solution 2:[2]

Add "mm-wrapper_sidebar-closed" class to html tag.

Solution 3:[3]

I added in html (javascript):

window.location.hash = "menu";

Solution 4:[4]

Ivan, I upvoted you because it made me realize that the issue for me is related to the hash, thanks : ).

If you're not opening the mmenu programmatically with JS, it instructs you to have a link with the href property set to the selector of the menu that you want to open. So I have something like:

<a href="#navbar-menu"> ... </a>

to target the menu selector with an ID of navbar-menu. What I didn't realize was I had clicked on this link before all of my JS code was in place, so the current URL still had a hash in it pointing to the menu selector. e.g.

https://yourdomain.com/#navbar-menu

I'd refresh the page and the menu would just open automatically. Because mmenu allows you to use a hash to define the state of the menu - open when the hash corresponding to the menu selector is in the URL.

FYI for anyone who is running into the same issue. If the menu is opening automatically, remove the hash.

Solution 5:[5]

You can use the "initial" option under the sidebar addons.

    sidebar: {
        collapsed: {
            use: '(min-width: 450px)',
            hideNavbar: false,
        },
        expanded: {
            use: '(min-width: 992px)',
            initial: 'closed'
        },
    },

reference: https://github.com/FrDH/mmenu-js/issues/967

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 emilushi
Solution 2 ??????? ??????????
Solution 3 Ivan Terzi
Solution 4 JDev518
Solution 5 hardika

Related Questions