No Time Dad

A blog about web development written by a busy dad

Designing Simple Menus

The title of this post was almost “Designing Simple Mobile Menus”. But I think this design can be applied to other types of menus too. It’s no secret in the frontend development world that creating menus is hard. Or maybe I should say that creating menus that are accessible and provide a good user experience is hard.

Below is a simple example of my favorite type of menu. Clicking on a button labeled “Menu” uses JavaScript to remove a css selector called .hide and displays a menu element. Clicking the menu button again adds the .hide selector to the menu element, hiding it from view on the page.

<html>
  <style>
    .hide {
      display: none;
    }
  </style>
  ...
  <button id="menu__button">Menu</button>
  <nav id="menu" class="hide">...</nav>
  ...
  <script>
    document.getElementById("menu__button").addEventListener("click", () => {
      const mobileNav = document.getElementById("menu")
      mobileNav.classList.toggle("hide")
    })
  </script>
</html>

Displaying the menu element like this means that the content beneath it is pushed down. This is called a content shift. And in most cases it’s not a great user experience. It’s frustrating for the end user when a link or text suddenly moves without warning.

However, in the case of a menu button the user is expecting a menu to show up somewhere and probably won’t be frustrated with the content shift. By clicking on the menu button they’ve shown intent that they’re expecting to see a menu. They’re not focused on the content beneath the menu anymore.

The other nice thing about the menu example above is that even though it’s simple, it’s still accessible. I don’t need to do anything special to be able to tab through the menu items. No extra libraries needed. It just works.

Type of menus (worst to best)

Hover to open menus that pop-over content

In my opinion this is the worst type of menu. Clicking shows intent. Clicking is equivalent to grabbing something with your hand. It’s saying “I want to see this” or “I’m expecting something to happen”.

I’m not sure at what point we decided that mousing over something showed intent, but I think it’s a mistake to interpret it that way.

I was recently looking for a nice coat online on some of the usual places to buy mens coats. The menu experience on most of them was terrible. Half of the time I ended up clicking on womens or childrens links because the menu shifted around so much when I moved my mouse.

I realize that the average e-commerce menu is much more complicated than the example I’ve shown above, but I really think that triggering the menu to expand on hover is bad idea. No surprises, please. Allow me to show intent.

Click to open menus that pop-over content

This type of menu is better, but not the best. I think it can be done in a non-hostile way if you know what you’re doing. But for some reason covering the content with the menu rubs me the wrong way. I think it’s a worse user experience than pushing the content down.

There’s also the accessibility concern with pop-over menus. Extra steps need to be taken to ensure that users can focus and tab through the menu. You’d be surprised how many large websites don’t have accessible menus.

Click to open menus that push content down

As shown in the example above, this one is my favorite. Need a live example to look at? Check out how the award winning gov.uk website handles their menus. Spoiler alert: they push the content down when you click on the menu button to open the menu.