Set selected introduction

To make a listitem visibly "selected" onMouseOver or when opening its subpanel, include the "setSelected" add-on .js and .css files and use the setSelected options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.setselected.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.setselected.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            setSelected: {
               // set selected options
            }
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Add a mouseOver-effect.
  • Select parent menu item for opened panel.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
  • Core (on-canvas).
Works great with:

Options for the "setSelected" add-on

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

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.

SCSS variables for the "setSelected" add-on

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

SCSS mixins for the "setSelected" add-on

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_setselected Include this mixin to create a custom color scheme for the "setSelected" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$backgroundColor $mm_emphasizedBackgroundColor 2 The background-color of the selected menu item.
)

Next add-on:
Toggles