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_opt_buttons $mm_opt_listviews or $mm_opt_navbar Boolean Whether or not to include CSS for buttons throughout the entire CSS framework.
$mm_opt_listviews true Boolean Whether or not to include CSS for listviews throughout the entire CSS framework.
$mm_opt_listviews_divider $mm_opt_listviews Boolean Whether or not to include CSS for dividers in listviews throughout the entire CSS framework.
$mm_opt_listviews_spacer $mm_opt_listviews Boolean Whether or not to include CSS for spacers in listviews throughout the entire CSS framework.
$mm_opt_navbars true Boolean Whether or not to include CSS for navbars throughout the entire CSS framework.
$mm_opt_vertical $mm_opt_listviews Boolean Whether or not to include CSS for vertical submenus 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 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.4) 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_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 + $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).
$mm_dividerFontSize 75% CSS value The font size for dividers.
$mm_navbarHeight $mm_btnSize CSS value The height for the navbars.