Set selected introduction

To make a menu item appear "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>

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 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 false Boolean Whether or not to make menu item appear "selected" onMouseOver.
parent false Boolean Whether or not to make menu item appear "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.

Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Toggles