Over the past couple of weeks I've designed one or two responsive navigation systems that involve toggling the display of the menu through a show/hide icon.
There are some fantastic resources out there that explain various ways of implementing this navigation pattern, which seems to be emerging as a standard, so I thought I'd take a few moments to round up those I've found most helpful.
Until now I've tended to favour the simplest possible approach to responsive navigation. When designing the mobile state for a typical navigation menu, like this -
- I've simply floated the menu items left:
But lately I've seen more and more responsive designs using what Brad's piece termed the toggle approach. In this system the standard desktop menu -
- is replaced with a show/hide navigation icon when the design is viewed in mobile state, which toggles the display of the menu items:
I'm coming to really like this approach. It opens up vertical space on smaller screens, and ensures the full navigation menu can be easily accessed through a conveniently placed button. It's also rather elegant: see Starbucks and Paul Robert Lloyd for a couple of good examples.
I found the following posts very useful in helping me implement appropriate solutions for the sites I've been working on.
- Meta Q how to: Responsive toggle menus - a really handy piece by Terris Kremer of Q Digital Studio. Perfect for a usable, reliable toggle for simple navigation systems.
- Mobile Navigation Design & Tutorial - nice roundup and simple tutorial on Web Designer Wall. Very similar to the Q Digital solution above but in this case the menu overlays the underlying content rather than sliding up and down the screen.
- A Responsive Design Approach for Navigation, Part 1 - terrific write-up by the Filament Group of the toggle system they implemented for the Boston Globe.
- Build a smart mobile navigation without hacks - a clear walkthrough by Aaron Gustafson of a pure CSS toggle system.
It's worth noting that there's been a little bit of debate about the most appropriate icon to use for the show/hide navigation icon. See these posts by Jeremy Keith and Andy Clarke. Both posts discuss and support the emerging consensus that a three-line icon should be the standard option, with a downwards pointing arrow probably OK too.