Personal and Professional Blog of Rich Hauck

A responsive, accessible mega menu

by: Rich Hauck

I recently completed a project where I was tasked with creating a mega menu but was also afforded time to focus on website accessibility. Sure, I knew of the value of HTML5 validation, image alt tags, and including a skip navigation button, but during my research this video inspired me to give up icon fonts and try to include ARIA roles in my code.

In keeping with this accessibility-conscious kick, I sought a mega menu navigation that supported ARIA roles. I ultimately came across Adobe’s mega menu from 2013. While I uncovered other JQuery mega menus, I still consider this one to be one of the best examples of a working mega menu that’s also accessible (see Adobe’s Github repo).

My only gripe was that their example wasn’t responsive. After sifting through forks looking for a reliable example, I went ahead and made my own fork to make this responsive accessible mega menu.  Here’s a working example of the fork.

The object arguments for the accessibleMegaMenu() constructor are a bit excessive, but I’ve kept with Adobe’s pattern in an effort to make the code as approachable as possible. I added three major arguments:

  • navToggle – The id selector of the element triggering the mobile menu toggle
  • navId – the id selector of the navigation
  • mobileBreakpoint – The breakpoint at which the navigation toggles to mobile.

The last one, mobileBreakpoint, is perhaps the biggest change, as it’s referenced in conditionals throughout jquery-accessibleMegaMenu.js to determine whether navigation items behave on click or hover.

Have a look, and make it your own.

Comments: 1

One thought on “A responsive, accessible mega menu

  1. RR says:

    Thanks for sharing. I see this menu only has two levels. Would you have this sample for 3 levels?

Leave a Reply

Your email address will not be published. Required fields are marked *

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and three boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.