On-click Navigation Behaviour

On-click versus hover behaviours

For menus with a hover state, the navigation experience can be something like this:

where a menu item has no child pages, one click reveals the page
where a menu item has at least one child page, the parent item is clickable, and hovering on the menu reveals the sub-menu (sometimes known as a fly-out menu), OR
where a menu item has at least one child page, one click reveals the sub-menu, and a double click reveals the page

The problem with hover states in a menu:

they require substantial control of mouse function and become inaccessible to anyone with motor impairments
this style of drop-down menus are often not designed with keyboard users in mind.

Find on w3.org

Find on WebAim.org

While a skilled developer can use different methods to ensure accessibility, the preferred menu behaviour for Queen's sites is as follows:

any action in the menu requires only one click
for menu items with no child pages, one click reveals the page
for menu items with child pages, one click opens/closes a sub-menu
hover states only further reveal affordances in link design that indicate the clickability of the text; no fly out menus

Impact on content structure:

any item in the menu that has an arrow/toggle indicating at lease one sub-menu/child page(s) no longer links to a page; a landing page is not required for parent items in the menu

For users of the WebPublish content management system: Learn more about creating menus