#054: Tap-to-Show Mobile Navigation

(Updated on )

We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2×4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS simulator and see that in some cases you can’t see any actual content at all.

We take a look at a few resources on how to handle navigation patterns, like Brad Frost’s article Responsive Navigation Patterns and Jason Weaver’s Off Canvas. We also look at a cool demo on MDN called Paperfold.

We add an additional link to the navigation we ultimately call “Navigation ‘n’ Search” which will act as the button to reveal the mobile navigation when tapped. Through media query breakpoints, we hide and show this button as needed.

The toggling of the navigation we’ll mostly handle with JavaScript. A little risky as it alienates those on small screens with JavaScript disabled – but I’m just going with it. That number is so small (smaller than desktop without JavaScript, which is certainly less than 1%) that I’m just going to be a jerk and run with it.

All we really do with JavaScript is toggle a class name. That what I like to think of as state-driven CSS development. All the control of what is shown and when and how is handled with CSS. JavaScript just sets a class to declare the current state.

We spend a bunch of time tinkering with adding in the “paperfold” CSS, getting it working correctly, and then placing the search in a gap we create above the main content through some padding.

Ultimately, the sizing and position is tweaked to fit even nicer and a small close button is added. I go back and forth in my head with providing UI for toggling states on things like this. One one hand, now that the user has revealed the navigation, why would they need to close it? They’ve already seen it. If they don’t want to use it, they can just flick past it. On the other hand, I find it kind of annoying when I can’t toggle states like this on other apps (for some reason) so I’m inclined to provide a mechanism to do it.