(S)CSSintroduction

The jQuery.mmenu plugin uses CSS variables for most of its sizing and styling. The default CSS variables can be overridden to customize your menu without having to make changes to the plugin.

<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" />
   <style type="text/css">
      .mm-menu {
         --mm-listitem-size: 50px;
      }
   </style>

Note that CSS variables are declared for the .mm-menu and/or .mm-slideout elements.


The jQuery.mmenu plugin uses SCSS to compile its .css files. The default SCSS variables can also be overridden. Learn how to do so on the custom build page.

Note that add-ons and extensions might have their own set of CSS and SCSS variables.

Available CSS variables

Variables Default value Datatype Description
Colors
--mm-color-background $mm_backgroundColor CSS value The background-color for the menu.
--mm-color-background-emphasis $mm_emphasizedBackgroundColor CSS value The background-color for emphasized menu items.
--mm-color-background-highlight $mm_highlightedBackgroundColor CSS value The background-color for highlighted menu items.
--mm-color-border $mm_borderColor CSS value The border-color for navbars, menu items, etc.
--mm-color-button $mm_dimmedTextColor CSS value The color for buttons.
--mm-color-text $mm_textColor CSS value The text-color for the menu.
--mm-color-text-dimmed $mm_dimmedTextColor CSS value The text-color for dimmed out elements in the menu.
Positioning
--mm-offset-top $mm_offsetTop CSS value Menu top offset.
--mm-offset-right $mm_offsetRight CSS value Menu right offset.
--mm-offset-bottom $mm_offsetBottom CSS value Menu bottom offset.
--mm-offset-left $mm_offsetLeft CSS value Menu left offset.
Sizes
--mm-line-height $mm_lineHeight CSS value The line-height for the menu.
--mm-listitem-size $mm_listitemSize CSS value The height for the menu items.
--mm-navbar-size $mm_navbarSize CSS value The height for the navbars.

Note that add-ons and extensions might have their own set of CSS variables.

Available SCSS variables

Variables Default value Datatype Description
Include CSS
$mm_opt_listviews_divider true Boolean Whether or not to include CSS for dividers in listviews throughout the entire CSS framework.
$mm_opt_listviews_spacer true Boolean Whether or not to include CSS for spacers in listviews throughout the entire CSS framework.
$mm_opt_vertical true Boolean Whether or not to include CSS for vertical submenus throughout the entire CSS framework.
$mm_opt_rtl true Boolean Whether or not to include CSS for RTL support throughout the entire CSS framework.
Animations
$mm_transitionDuration 0.4s CSS value The duration of all transitions.
$mm_transitionFunction ease CSS value The function to use for all transitions
Colors
$mm_backgroundColor #f3f3f3 CSS value The background-color for the menu.
$mm_borderColor rgba(0,0,0,0.1) CSS value The border-color for navbars, menu items, etc.
$mm_dimmedTextColor rgba(0,0,0,0.3) CSS value The text-color for dimmed out elements in the menu.
$mm_emphasizedBackgroundColor rgba(255,255,255,0.4) CSS value The background-color for emphasized menu items.
$mm_highlightedBackgroundColor rgba(0,0,0,,0.05) CSS value The background-color for highlighted menu items.
$mm_navbarColor rgba(0,0,0,0.3) CSS value The text-color for navbars.
$mm_textColor rgba(0,0,0,0.75) CSS value The text-color for the menu.
Positioning
$mm_offsetTop 0px CSS value Menu top offset.
$mm_offsetRight 0px CSS value Menu right offset.
$mm_offsetBottom 0px CSS value Menu bototm offset.
$mm_offsetLeft 0px CSS value Menu left offset.
Sizes
$mm_btnSize 44px CSS value Base size for listitems, navbars, etc.
$mm_lineHeight 20px CSS value The line-height for the menu.
$mm_listitemIndent $mm_padding*2 CSS value The left indent of the menu items.
$mm_listitemSize $mm_btnSize CSS value The height of the menu items.
$mm_navbarSize $mm_btnSize CSS value The height for the navbars.
$mm_padding 10px CSS value The padding for elements throughout the CSS framework.
$mm_panelPadding $mm_padding*2 CSS value The padding of the panels.
$mm_subopenWidth $mm_btnSize + $mm_padding CSS value The width of the buttons that open submenus.
$mm_subpanelOffset 30% CSS value How far a panel slides out to the left when opening a subpanel as a percentage. From 0% (not moved) to 100% (fully moved out).

Note that add-ons and extensions might have their own set of SCSS variables.