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!