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

SCSS mixins for the "themes" extension

The "themes" extension has no SCSS mixins.

Next extension:
Tileview