Themes introduction

The default color theme for the menu is light gray (#f3f3f3). Because the menu uses semi-transparent black and white shades, the menu is easily themeable. All you need to do, is change the background color of the menu.

<style type="text/css">
   #my-menu {
      background-color: #323849;
   }
</style>

To apply a different theme to the menu, include the "themes" extension .css file and add the theme name to the extensions option.

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

  • Apply the default theme to the menu.
  • Apply the "dark" theme to the menu.
  • Apply the "white" theme to the menu.
  • Apply the "black" theme to the menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Available themes

theme-light (default)
A light gray background with semi-transparent black and white shades.
theme-dark
A dark gray background with semi-transparent black and white shades.
theme-black
A black background with semi-transparent white shades.
theme-white
A white background with semi-transparent black shades.

SCSS variables for the "themes" extension

The "themes" extension has no SCSS variables.

Next extension:
Tileview