Tips and tricks

Here you can find some useful tips and tricks and the answers to the most frequently asked questions. Can't find what you're looking for? Ask your question on stackoverflow.com.

Basic CSS tips
Improve how the plugin works in your project.

1. Set a background(-color) on the BODY.

body {
   background-color: #fff;
}

2. Don't set a height on the HTML. If you need a DIV to be (at least) 100% height, set the (min-)height to 100vh.

#my-div {
   height: 100vh;
}

3. Hide the menu until the document is done loading.

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

Responsive layouts
Use the same menu for the desktop and mobile site.

If you only want to use the jQuery.mmenu plugin for the menu on a smaller screen, don't try to destroy and (re)create the menu onWindowResize. That won't work because the plugin makes a lot of modifications to the HTML that can not be reverted. Instead, you should (let the plugin) clone the menu and use CSS to show and hide either the original or cloned menu.

$("#my-menu").mmenu({
   // options
}, {
   // configuration
   clone: true
});

Use CSS to show and hide the original or cloned menu depending on the width of the screen. Note that all ID's in the menu will be prepended with "mm-":

@media (max-width: 600px) {
   #my-menu {
      display: none !important;
   }
}
@media (min-width: 601px) {
   #mm-my-menu{
      display: none !important;
   }
}

The plugin assumes every A element in the menu should be clickable, it therefor adds the link to open a submenu next to it. If you replace the A with a SPAN, the entire menu item becomes clickable:

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><span>About us</span>
         <ul>
            <li><a href="/about/history">History</a></li>
            <li><a href="/about/team">The team</a></li>
            <li><a href="/about/address">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact">Contact</a></li>
   </ul>
</nav>

Fixed elements
Fixed elements somehow disappear when opening the menu.

If your page contains elements that have position: fixed; that suddenly seem to disappear when opening the menu, have a look at the fixed elements add-on.

$ is not a function
When "$" is not an alias of jQuery.

The sample code on this website assumes that "$" is an alias of jQuery (i.e. it is not in noConflict-mode). If it isn't (for example in WordPress sites), you can use this workaround:

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

More info about onDocumentReady here.