Application Launcher

Site Studio

Menu link element

Site Studio

Menu link element

Use the Menu link element within your Menu list item in your Menu template. The Menu link element allows you to set the interactive behavior of your menu links.

To find the Menu link 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 link element.

The Menu link element includes the following fields:

Markup

HTML markup - Sets the markup of the Menu link element.

Interaction

Interaction - Set the interactive behavior of your menu links within your menu.

Use the Menu link element within your Menu list item in your Menu template. The Menu link element allows you to set the interactive behavior of your menu links.

To find the Menu link 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 link element.

The Menu link element includes the following fields:

Markup

HTML markup - Sets the markup of the Menu link element.

Interaction

Interaction - Set the interactive behavior of your menu links within your menu.
- On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will display its sub-menus.
  - 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. If no sub-menu go to link - When the user clicks on the link, it will toggle the visibility of sub menus. Any sub-menus already open, will remain open. If the link has no sub-menus, the user will go through to the linked page.
  - 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. If no sub-menu go to link - When the user clicks on the link, it will toggle the visibility of its sub-menu. If another sub-menu is open, this will close. If the link has no sub-menus, the user will go through to the linked page.
  - 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.
- Click through to link - When the user clicks on the link they will go through to the linked page.
- No interaction - When the user clicks the link, nothing will happen.

Important

It is recommended that the desired animations are applied prior to creating CSS styles, as these styles could have a negative impact on the jQuery animation.

Custom style

Link style - Sets a custom style for the Menu link item. 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.

Important

The 'Link' element and other elements that include the group of link settings have an option to Add / Remove / Toggle a modifier.

When this action is taken, the element(s) targeted by the jQuery selector are given a class of coh-transition if/while they are transitioning.

This allows transition properties to only be applied when this class is present and not at any other time. For example, when the browser is resized.

This feature prevents unexpected transition animations from showing when a user changes the resolution of their browser.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Use the Menu link element within your Menu list item in your Menu template. The Menu link element allows you to set the interactive behavior of your menu links.

To find the Menu link 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 link element.

The Menu link element includes the following fields:

Markup

HTML markup - Sets the markup of the Menu link element.

Interaction

Interaction - Set the interactive behavior of your menu links within your menu.

On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will display its sub-menus.

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. If no sub-menu go to link - When the user clicks on the link, it will toggle the visibility of sub menus. Any sub-menus already open, will remain open. If the link has no sub-menus, the user will go through to the linked page.

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. If no sub-menu go to link - When the user clicks on the link, it will toggle the visibility of its sub-menu. If another sub-menu is open, this will close. If the link has no sub-menus, the user will go through to the linked page.

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.

Click through to link - When the user clicks on the link they will go through to the linked page.

No interaction - When the user clicks the link, nothing will happen.

Important

It is recommended that the desired animations are applied prior to creating CSS styles, as these styles could have a negative impact on the jQuery animation.

Link style - Sets a custom style for the Menu link item. For more information see Creating custom styles.

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.

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

Important

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Locating the menu link element

Markup

Interaction

Locating the menu link element

Markup

Interaction

Custom style

Match heights

Comments

Did not find what you were looking for?

Locating the menu link element

Markup

Interaction

Custom style

Match heights

Comments

Did not find what you were looking for?