Themes introduction

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

<style>
   #my-menu {
      --mm-color-background: #fec;
   }
</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, instead it redefines the already preset 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