Improving Menu Usability with CSS

menu usability with CSS

Menus are a fundamental component of a website. Users expect to be able to use a menu to navigate through your website. Menus come in many different shapes and sizes, but most follow similar patterns. There are several CSS features that can improve menu usability. Take the following menu:

A site navigation with three levels of lists with generic labeling to serve as an example

This is a pretty standard pattern for a menu with multiple levels of lists. In this case, we are activating the nested menus on hover or focus, and there are three levels of lists. When building menus, a very good resource to use as a reference is the W3C Web Accessibility Initiative (WAI) guide. It is important for your menu to be usable by all, and this guide will help you to achieve this goal.

The Third-Level Menu Problem

Once your menu is accessible by keyboard-only users, you might consider making some optimizations for mouse users. One unique problem with the menu above is the ability to access the third-level list using a cursor. Since this menu is a “fly-out”, getting from “Sub-Menu Item 3” to “Sub-Sub-Menu Item 3” means carefully moving the cursor to the right, and carefully moving the cursor down. This is unintuitive and potentially non-usable by users with less than 100% fine motor function. Let’s call this the third-level menu problem.

three-level site navigation menu with arrows showing the difficulty of accessing the third level list using a mouse

Let’s look at two ways to combat the third-level menu problem.

Method #1: Timing

Assuming that you are using a JavaScript event to listen for a mouseout event, you might add a delay to remove the sub-menu from display:

Some drawbacks here:

  • You have to manage timers in your JavaScript logic by using setTimeout and clearTimeout. This is a minor inconvenience, but something that can often be better to avoid.
  • There is a visual delay when your cursor leaves the element.
  • You are only guessing at the optimal timing; it is imprecise and there will likely be no time which works well for all.
  • You often do not have access to the menu logic, especially when working in a WordPress environment. Often, the menu markup and logic is contained within a parent theme or even a plugin.

Method #2: Pseudo-elements

You might also be able to use a pseudo-element placed in a way to expand the cursor target area when an element is being hovered over.

Let’s refresh our understanding of the CSS pseudo-elements ::before and ::after. In the markup, these pseudo-elements select the part before and after all of the parent element’s inner content.

It looks somethings like this:

<li>
    ::before
    <a href=”#”>...</a>
    ::after
</li>

These pseudo-elements are a part of the element itself. These pseudo-elements can be positioned absolutely in relation to the parent element. This means that we can in a way “artificially” expand the mouse target of the element itself.

three-level site navigation menu showing a pseudo-element placed to expand the mouse target

We can then level-up this styling and use the CSS property clip-path. We can use clip-path to turn our pseudo-element into a shape using some simple points. Let’s make our pseudo-element into an intuitive triangle:

three-level site navigation menu showing a pseudo-element placed to expand the mouse target, shaped like a triangle

Your menu allows users to navigate your site efficiently, so it is not something you want to overlook. Use this advice sparingly and cautiously, but always think about your users. If you need assistance with menu usability or other accessibility development issues, reach out to us.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

WordCamp U.S.

WordCamp U.S. 2017 – Nashville

This year WordCamp U.S. was held in Nashville, Tennessee. The event happened at the Music City Center, an enormous conference center that dominates the center of downtown Nashville. As the second destination for the traveling WordCamp, Nashville was an amazing choice. Some of the Sites in Nashville Nashville is all about two things: music and…
Read More
actions and filters

WordCamp San Diego 2012: Playing Hooky with Actions and Filters

Jeff discusses how to use Actions and Filters (Hooks) with your WordPress themes and Plugins at WordCamp San Diego 2012.
Read More

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

Subscribe to learn more about the goings on at Pixel Jar.
  • Note: Your email will be added to our CRM and be used to receive emails from Pixel Jar. You can unsubscribe at any time.

  • This field is for validation purposes and should be left unchanged.