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" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.themes.css" type="text/css" rel="stylesheet" />

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

<script type="text/javascript">
   $(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 type="text/javascript">
   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 type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: {
            "all": ["theme-dark"],
            "(min-width: 400px) and (max-width: 799px)": ["iconbar"],
            "(min-width: 800px)": ["widescreen"]
         }
      });
   });
</script>

SCSS variables

Extensions might have their own set of SCSS variables.

Available extensions

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