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

Locating the menu button element

To find the Menu button element:

• Navigate to Site Studio > Templates > Menu templates
• Create or Edit a Menu template
• Click the + button on the Layout canvas
• 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.

Menu button element

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

Locating the menu button element

To find the Menu button element:

• Navigate to Site Studio > Templates > Menu templates
• Create or Edit a Menu template
• Click the + button on the Layout canvas
• 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.