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.min.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" />

Most of the 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>

SCSS variables and mixins

Extensions might also have their own set of SCSS variables and mixins.

Available extensions

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