Why Squarespace 7.1 Dropdown Menus Should Appear on Click Instead of on Hover
A click event shows more intention from the user than a hover action when triggering a layout change (like opening a dropdown menu). This in turn provides a much better user experience, and eradicates unintended and annoying actions that come with hover menus.
In my years of web development, I have come to find that the benefits of click menus far outweigh those of hover menus, so much so that about 4 years ago, I stopped designing hover menus altogether. In this article, I will be explaining the reasoning and science behind why click menus provide a better user experience for websites, and I’ll provide some resources that can help you achieve a click menu on Squarespace 7.1 sites.
The Many Issues with Hover Menus
Hover menus are confusing to users because there is not really a conventional standard for them across websites.
Sometimes, the parent menu item - the item that triggers the dropdown to open on hover - actually links to a page if you click it. In this scenario, what is the purpose of having dropdown options if they can just go to a page by clicking the parent item? Furthermore, does the parent item link to just any page, or is it the first item in the dropdown menu?
Hover menus often cause an issue commonly known in UX design as the “Diagonal Problem”, which is more prevalent in mega menus than in regular dropdown menus. If a user hovers a parent item and tries to navigate directly to a dropdown option that is diagonal to the left or right, the user could accidentally move the mouse outside of the menu, causing it to close before they can choose an option.
The hover action virtually does not exist on touchscreen devices, so it can be difficult to write code that works optimally for tablet devices.
Since there is not a keyboard shortcut for hovering, keyboard users are forced to click through every single menu dropdown option just to find what they need.
How can click menus solve the issues with hover menus?
When you analyze the aspects of a click action versus a hover action, the findings show that clicking is a much more intentional action done by the user, and therefore the response makes much more sense to the user.
Clicking the parent item lets the user know there is only one intended action the parent item triggers. This removes the ambiguousness of parent items that open dropdown menus and also link to a page.
The user has much more control over when the menu closes because they have to click outside the menu to close it. This avoids the previously mentioned “Diagonal Problem” that can occur if the mouse accidentally leaves the menu.
The click action exists on all devices including touchscreen devices, so it is much easier to create a menu that is multi-device compatible.
Keyboard users can navigate through parent menu items and use the “Enter” key (the keyboard equivalent of clicking) to open dropdown menus they want to explore further, instead of having to navigate through every single one.
To achieve dropdown menus that open on click on your Squarespace 7.1 site, you can add the code snippet available here to your site.
Don’t just take my word for it! Here is what some of the big wigs in web design have to say about click vs hover menus:
Avoid using hover to expand dropdown lists. Hover is difficult for some users and won’t work on touch screens. Dropdowns should expand on click or with keyboard navigation.
What it really boils down to is user intent. The purpose of a hover state is to indicate something is clickable (underlined text)… The purpose of a click is to actually do something, to take an explicit action. Opening a dropdown is an explicit action and should only happen on click.
The caret in a dropdown link is the equivalent of underlining a link: it provides some affordance for what will happen when you click this element. Don’t mistake that for providing enough information to pop the dropdown on hover though.
Click menu accessibility vs. Hover menu accessibility
Similar to how click menus improve usability with mouse users, they make navigation much smoother and less time-consuming for keyboard users. With click menus, keyboard users have control over which menu items they want to explore further, whereas, with hover menus, users are forced to traverse every single menu item in every dropdown menu. Imagine how annoying this could be for a longer menu with lots of links. To learn the technical details about what makes dropdown menus web accessible for keyboard users, check out my article How to Make Squarespace 7.1 Folder Menus Web Accessible which includes a free dropdown menu accessibility code snippet for Squarespace 7.1 templates. If you are looking for a mega menu plugin that includes the exact same web-accessible features, check out the mega menu plugins available in my Squarespace plugin store.
Summary
Menus that open on click instead of on hover provide a much better user experience because when triggering a layout change (like opening a dropdown menu), a click event shows more intention from the user than a hover action. This eradicates unintended and oftentimes annoying actions that come with hover menus.
