SCSSintroduction

The jQuery.mmenu plugin uses SCSS to compile its .css files. The default SCSS variables can be overridden to customize your menu without having to make changes to the plugin. Learn how to do so on the custom build page.

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

Available variables

Variables Default value Datatype Description
Include CSS
$mm_css_buttons true Boolean Whether or not to include CSS for buttons.
$mm_css_listviews true Boolean Whether or not to include CSS for listviews.
$mm_css_navbars true Boolean Whether or not to include CSS for navbars.
$mm_css_vertical true Boolean Whether or not to include CSS for vertical submenus.
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 of the menu.
$mm_borderColor rgba(0,0,0,0.1) CSS value The border-color of the menu items.
$mm_dimmedTextColor rgba(0,0,0,0.3) CSS value The text-color of dimmed out elements in the menu.
$mm_emphasizedBackgroundColor rgba(255,255,255,0.5) CSS value The background-color of emphasized menu items.
$mm_highlightedBackgroundColor rgba(0,0,0,,0.05) CSS value The background-color of highlighted menu items.
$mm_navbarColor rgba(0,0,0,0.3) CSS value The text-color of dimmed out elements in the menu.
$mm_textColor rgba(0,0,0,0.75) CSS value The text-color of the menu.
Sizes
$mm_btnSize 40px CSS value The height of the menu items.
$mm_fontSize 14px CSS value The font-size of the menu.
$mm_listitemIndent $mm_padding*2 CSS value The left indent of the menu items.
$mm_listitemPadding $mm_padding CSS value The padding of the menu items.
$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 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).