Adding interactivity to your menu

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.

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.