Use the Menu button element on your Menu template to toggle submenu visibility.

Locating the menu button element¶

To find the Menu button element:

1. Navigate to Site Studio > Templates > Menu templates
2. Create or Edit a Menu template
3. Click the + button on the Layout canvas
4. Within the Elements tab, look for the Menu button element.

Interaction¶

• Interaction - Set the interactive behavior of your menu button within your menu.

  • On click, toggle sub-menu visibility - When the user clicks the menu button it will show or hide the sub-menu
    • jQuery animation - Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: http://api.jqueryui.com/category/effects
      • Target jQuery selector - Set the selector to target, for example .dropdown
      • Easing - Set the jQuery Easing to apply. 
        More information about the Easing options here: http://api.jqueryui.com/easings
      • Duration (ms) - Set in milliseconds, how long the animation should take to complete.
  • On click, toggle sub-menu visibility and hide sibling items - When the user clicks the menu button it will show or hide the sub-menu and close other sub-menus at the same level
    • jQuery animation - Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: http://api.jqueryui.com/category/effects
      • Target jQuery selector - Set the selector to target, for example .dropdown
      • Easing - Set the jQuery Easing to apply. 
        More information about the Easing options here: http://api.jqueryui.com/easings
      • Duration (ms) - Set in milliseconds, how long the animation should take to complete.
  • On click, toggle parent menu visibility - When the user clicks the menu button it will show or hide the parent menu
    • jQuery animation - Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: http://api.jqueryui.com/category/effects
      • Target jQuery selector - Set the selector to target, for example .dropdown
      • Easing - Set the jQuery Easing to apply. 
        More information about the Easing options here: http://api.jqueryui.com/easings
      • Duration (ms) - Set in milliseconds, how long the animation should take to complete.

Custom style¶

• Button style - Sets a custom button style for the Menu button. For more information see Creating custom styles.

Match heights¶

• Match heights - Match the height of the element using
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments¶

• Add comments - Add comments to the Element. For more information, see Adding comments to an element.