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:

    <a href=”#”>...</a>

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.

contextual ad groups

Creating Contextual Ad Groups

We are exposed to contextual advertising all over the web. If you’re watching a YouTube video about playing guitar, you might see an ad for guitar pedals before the video. Maybe you’re reading a blog post about knitting on a hobby blog. You’ll likely see ads for yarn and knitting tools. If you’re using an…
Read More
Setting Your Digital Strategy for 2019

Setting your Digital Strategy for 2019

The calendar has turned and another year has begun. What are you most excited about? What gives you the biggest pause? How will you spend your time? What are your goals, your resolutions, your ambitions? Do you expect to reach new heights and try new things? Or are you anticipating 2019 will look a lot…
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.