Extensions introduction

Because the jQuery.mmenu plugin uses CSS for all sizing, positioning, styling and animations, the look and feel of a menu is easily extendable by including additional .css files.

<head>
   <script src="path/to/jquery.js"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.themes.css" rel="stylesheet" />

Extensions need to be enabled for the menu. To enable an extension, add its name to the extensions option.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: ["theme-dark"]
      });
   });
</script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Dim out the page to black.
  • Open the menu from the right.
  • Apply the "dark" theme to the menu.
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Responsive options

For responsive purposes, all extensions can be (de)activated when (un)matching a media query. To do so, move the extensions array to an object using the media query as a key. Use the "all" key for extension that should always be activated.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: {
            "all": ["theme-dark"],
            "(max-width: 400px)": ["fullscreen"]
         }
      });
   });
</script>

CSS & SCSS variables

Extensions might have their own set of CSS and SCSS variables.

Available extensions

Border style Effects Fullscreen Listview Multiline Page dim Popup Positioning Shadows Themes Tileview

Deprecated There is a new, improved version available. Check it out on mmenujs.com

Get the new version No thanks