You can add interactivity to your menus to show and hide sub-menus on hover or on click. There are settings within the Menu list item element and Menu link element to apply interactivity to your Menus. When applied, these setting use JavaScript to add and remove classes on your Menu list items. You can use a Custom list style to style these classes and change the appearance of your menu items when a user interacts with your menu.
Menu classes
The following classes are applied to your menu list items when a user interacts with a menu link. Use these classes to affect the appearance of your menus when the interacts with them.
is-active - Is applied to the menu list item when the user is on the current link page
has-children - Is applied to the menu list item if the menu item, has children (sub-menus)
is-expanded - Is applied to the menu list item if the menu item has children (sub-menus) and they are expanded
is-collapsed - Is applied to the menu list item if the menu has children (sub-menus) and they are collapsed
in-active-trail - Is applied to the menu list item if the menu item is within the active trail.
Menu list item element interactive settings
Within the Menu list item (used within your Menu templates) there are the following options:
Child list visibility - Sets the initial classes on child menus
Initially hidden - Adds the classes is-collapsed and has-children to child menus
Initially visible - Adds the classes is-expanded and has-children to child menus
Use active trail - Adds the classes is-expanded and has-children to child menus within the active trail
Menu link item element interactive settings
Within the Menu link element (used in your Menu templates) there are the following options:
Interaction - Set the interactive behavior and classes applied to your menu links and child menus
On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will apply the classes is-expanded and has-children to child menus. If the menu link has no child menus, no classes will be applied. On click, the user will go to the linked page.
On click, toggle sub-menu visibility. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
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 apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. It will also apply the class is-collapsed to the child menus of siblings. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
Click through to link - When the user clicks on the link they will go through to the linked page.
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.
You can add interactivity to your menus to show and hide sub-menus on hover or on click. There are settings within the Menu list item element and Menu link element to apply interactivity to your Menus. When applied, these setting use JavaScript to add and remove classes on your Menu list items. You can use a Custom list style to style these classes and change the appearance of your menu items when a user interacts with your menu.
Menu classes
The following classes are applied to your menu list items when a user interacts with a menu link. Use these classes to affect the appearance of your menus when the interacts with them.
is-active - Is applied to the menu list item when the user is on the current link page
has-children - Is applied to the menu list item if the menu item, has children (sub-menus)
is-expanded - Is applied to the menu list item if the menu item has children (sub-menus) and they are expanded
is-collapsed - Is applied to the menu list item if the menu has children (sub-menus) and they are collapsed
in-active-trail - Is applied to the menu list item if the menu item is within the active trail.
Menu list item element interactive settings
Within the Menu list item (used within your Menu templates) there are the following options:
Child list visibility - Sets the initial classes on child menus
Initially hidden - Adds the classes is-collapsed and has-children to child menus
Initially visible - Adds the classes is-expanded and has-children to child menus
Use active trail - Adds the classes is-expanded and has-children to child menus within the active trail
Menu link item element interactive settings
Within the Menu link element (used in your Menu templates) there are the following options:
Interaction - Set the interactive behavior and classes applied to your menu links and child menus
On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will apply the classes is-expanded and has-children to child menus. If the menu link has no child menus, no classes will be applied. On click, the user will go to the linked page.
On click, toggle sub-menu visibility. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
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 apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. It will also apply the class is-collapsed to the child menus of siblings. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
Click through to link - When the user clicks on the link they will go through to the linked page.
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.
Site Studio