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