I’m quite pleased to share my latest blog post published today on the CSS Tricks blog!
I’ve built a bunch of websites and learned a lot more about usability, accessibility, and content strategy. Now, I find hover-triggered menus lacking on all those fronts. So, a few years ago, I quit building hover-triggered submenus and switched to click-triggered submenus. (From here, I’ll just call them “hover menus” and “click menus.”)
I think you should should stop building hover menus too. I’m here to tell you why.
Me
As with the previous article of mine they published, I felt like I had something to say worth sharing with a wider audience: submenus that appear on click are better than submenus that appear on hover. You’ll have to read the full article to learn why.
In many ways, this is a new version of a 2014 blog post I wrote, “What are We To Do About Hover Drop Down Menus?” Back then, I had a tentative answer and a not-as-good solution. What I share today is backed by more experience, research, and better code. I really like how the article turned out, and I think you’ll find it quite compelling!
This article has a few moments of code and techno-babble, but I’m sure that anyone who uses websites will be able to understand and learn from the main takeaways of the article. You can also use the thing I wrote about in a demo! It has pretty colors.
Blogging is an amazing way to clarify and organize thoughts, and that happened even more than usual with this post. I’ve literally had this post brewing in my head for two years (not exaggerating), but I think that shows. My long journey to today forced me to review and polish my own code which is used on my clients’ websites. I even had a paid accessibility consultant test the menu with a screen reader to ensure it really was accessible.
Last week, I posted the code on Github in hopes of others using it and getting feedback to make it even better. Sharing my thoughts and work in public this way often leads to a virtuous cycle that improves my websites, my skills, and, hopefully, the experience of many website visitors.
Update 5 April 2021: The response to this article has been awesome! Many folks have broken their necks nodding in agreement, and I know this article provided both code and language that people plan to adopt in the future! Today, I saw the article got linked to from the Balsamiq blog, so that’s a big vote of confidence in the ideas I shared!
I read the article on CSS Tricks but competently forgot to look at who the author was. Fantastic article and thank you for the code samples. It’s something I hope to implement on my own sites and into my client projects.
So glad you found the article anyway, Patrick! I’m thrilled it made sense and gave you something useful to try out. Let me know how it goes with your sites! I’m very opening to improving the script or it’s documentation if that will help more people. Here’s the Github link: https://github.com/mrwweb/clicky-menus
Hi Mark,
Do you have an implementation or an example of this working along with a mobile menu button? The menu works well, now I am just trying to get it to work with a mobile menu.
I ended up reusing a segment of JS I had for accessible hide/show buttons but I am sure there are more elegant methods. Thanks for providing the menu example. I’ve incorporated it into my base theme and am much happier with how it works.
Glad you found a solution, Patrick! That’s also how I handle it. Here’s one site that’s using a slightly earlier version of the script but works just that way: https://wscadv.org/
Ah ok, I dug into a couple of your other sites to see how you implemented it slightly differently in each case but I will take a look at this one as well. Thank you again for the script examples and walk through, can’t wait to get it out on a clients website.