One of the most challenging aspects of responsive design is creating a complex menu system that works well on mobile, tablet, and desktop devices. In this post, I will briefly discuss the common problems and then move on to outline a proposal for one possible way of handling them elegantly across a multitude of devices.
Problems
Responsive navigation menus are challenging because the ideal solutions for each type of device are so drastically different. I’ll spell out some of the problems individually, but if you’re in a hurry, just read the following sentence and then skip to the “Solutions” section. The problem with current website navigation solutions is that they don’t account for all of the following:
- Mobile first
- Complex (at least 3 levels deep)
- Touch and hover.
Desktop Solutions. There are a number of solutions for multi-level drop down menus for desktop browsers. Superfish is probably the most popular solution in this category, but there are many others. The goal is to allow quick access to multiple levels of navigational links. These solutions work great on a desktop computer with a mouse where the :hover CSS property can be used. They sometimes work on tablets, depending on which browser is being used. However, they run into significant issues on mobile devices where the screen size is too small to accommodate so many links.
Mobile Solutions. There are a number of projects seeking to simplify menus for mobile devices. However, few (if any) try to tame a complex menu containing multiple levels of links. They work great for simple menus, but that’s about it. Also, most of these solutions are not mobile first solutions, but rather a patch added later in an attempt to cover up a problem created earlier in the design process.
Now let’s move on to what can be done about our current predicament.
Solutions
Designing a mobile first, progressively enhanced menu should start with the smallest devices and most basic solutions. We’ll start with phones and HTML/CSS solutions. Then we’ll move to desktops. Finally, we’ll add some further enhancements using javascript.
Pills. The simplest menu layout is just a bunch of links one after another. These links can be given some sort of background to differentiate them from each other, and are often called pills.
The great thing about pills is that they can wrap to multiple lines on small devices without looking terrible. Pill can be used in almost any situation, so they make a good base from which to start our menu.
Dropdowns on :hover. On traditional desktops, we can use a horizontal drop down menu.
The traditional hover menus work quite well when :hover is supported. CSS media queries can be used to transform the original pills design into a horizontal navigation bar on larger devices.
Dropdowns on click. On touch devices, :hover isn’t a very good option. When a site is being viewed from a device with touch support, an arrow can be placed next to any menu item containing a sub menu. The default :hover state of the menu item will be replaced via Javascript by a click of the arrow. This can be used for both the pills and the horizontal navigation bar.
Toggled menus for phones. Finally, the mobile experience can be improved even further by setting up a vertical menu for small devices that can be toggled with the click of an extra button.
This allows the menu to be hidden from view on small screens until it is specifically requested. The image above only shows a single level of links. However, in an ideal system, multiple levels would be accessible.
Build it already!
I’m currently working on building a solution that will account for all the circumstances mentioned here. Check out mo.js on github to see what’s been done so far. If you have any questions, comments, or suggestions (or if you’d like to take a look at what I’ve done so far), let me know via twitter.