Set selected introduction

To make a menu item appear "selected" onMouseOver or when opening its subpanel, use the setSelected options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                setSelected: {
                    // set selected options
                }
            }, {
                setSelected: {
                    // set selected configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Add a mouseOver-effect.
  • Select parent menu item for opened panel. 
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "setSelected" add-on

Option Datatype Default value Description
setSelected A map of options or true for setSelected.hover and setSelected.parent.
{
current Boolean true Whether or not to make the current menu item appear "selected".
Set to "detect" if you want the current menu item to be automatically found based on the URL.
hover Boolean false Whether or not to make menu item appear "selected" onMouseOver.
parent Boolean false Whether or not to make menu item appear "selected" while its subpanel is opened.
}

Configuration for the "setSelected" add-on

The "setSelected" add-on has no configuration options.

API methods for the "setSelected" add-on

The "setSelected" add-on has no API methods.

CSS variables for the "setSelected" add-on

The "setSelected" add-on has no CSS variables.

SCSS variables for the "setSelected" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_setselected Boolean true Whether or not to include CSS for the setSelected add-on throughout the entire CSS framework.

Next add-on:
Sidebar