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>
   #my-menu {
      background-color: #323849;
   }
</style>

To apply a different theme to the menu, for example to accommodate a dark background color, include the "themes" extension .css file and add the theme name to the extensions option.

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

  • Apply the "light" theme to the menu (default).
  • Apply the "dark" theme to the menu.
  • Apply the "white" theme to the menu.
  • Apply the "black" theme to the menu.
<script>
   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.

CSS variables for the "themes" extension

The "themes" extension has no CSS variables.

SCSS variables for the "themes" extension

Variable Default value Datatype Description
Include CSS
$mm_opt_themes true Boolean Whether or not to include CSS for the themes extension throughout the entire CSS framework.
$mm_opt_themes_white $mm_opt_themes Boolean Whether or not to include CSS for the white theme throughout the entire CSS framework.
$mm_opt_themes_dark $mm_opt_themes Boolean Whether or not to include CSS for the dark theme throughout the entire CSS framework.
$mm_opt_themes_black $mm_opt_themes Boolean Whether or not to include CSS for the black theme throughout the entire CSS framework.

Next extension:
Tileview