When I added a navbar to my website, I figured it would make sense to make the menus appear when the mouse cursor hovers over an item, because that's how it works on a menubar. In doing this, I made two mistakes.
First, menubars don't work that way. I was just misremembering it. You need to click on an item in the menubar to open the menu.
Second, making menus appear on hover is extremely annoying! I don't recommend it!
The web browser's interface appears above the webpage—the address bar and the tabs—so, if a user interacts with the web browser, the cursor of the mouse will be located at the top of the webpage. When the cursor goes "inside" the webpage and toward the main content below the navbar, e.g. to click a link, it will have to cross the navbar.
When the navbar is being crossed, if the cursor happens to cross it just over a menu item, the menu will appear, and if this menu is large enough it will hide the main content, perhaps even the content the user wanted to interact with, and in the worse case they'll accidentally click on the menu instead of where they wanted to click on.
One solution to this is to introduce a time delay before displaying the menu, so if the cursor crosses the navbar fast enough the menu won't appear. However, if this delay is even a few hundred milliseconds long, the delayed response will feel annoying, and if it isn't long enough, it won't prevent accidental interactions.
Presumably, the better solution would be to make them appear on click, but I haven't tried that yet, so I'm not really sure if that would be better.
Leave a Reply