On responsible, responsive navigation

Drop-down navigation for small screens is very popular in responsive web design, and rightly so. It allows us to greatly reduce the amount of screen space taken up by navigation elements when they are not needed.

Start with an unordered list of navigation links and hide them (collapsing the space they occupy) until they are requested. Easy right?

It’s a great concept, so why do so many approaches execute it the wrong way?

There’s a right way, and a wrong way

Unfortunately, I’m seeing a lot of examples (frameworks, I’m looking at you!) doing it the wrong way and ignoring the principles of both graceful degradation and progressive enhancement.

What I’m seeing is a pattern that runs basically like this:

• Markup a nav toggle link.
• Markup the menu.
• Hide main nav with CSS (Minus points for using display: none).
• Reveal the menu, when the nav toggle is clicked, using Javascript to reverse the default ‘hidden’ style set in css.

What’s the problem?

The problem with this approach is that there’s a weak link here, Javascript. Never assume that it will always be available. When it isn’t this is what you are left with, it isn’t pretty:

1. A nav toggle that doesn’t do anything (except frustrate users who click away in vain).
2. No navigation!
3. A very frustrated user.

I think we can all agree that this is not good.

Reverse that!

What bothers me most is that there is simply no need to do things like this. It’s sensless. We can achieve exactly the same thing with similar techniques applied in reverse. Let’s hide stuff with Javascript, instead of revealing it.

In fact, we can do all the hide/unhide business with css. We just need a little Javascript (jQuery in my case) to provide some hooks to work with. My preferred pattern goes like this:

• Markup the menu.
• Use Javascript to determine if we have Javascript!
• Create the nav toggle using Javascript. We don’t want it in markup, as without Javascript it’s useless.
• Use Javascript to add a css ‘hook’ to the menu when the toggle link is clicked.
• Hide the menu using css, if, and only if, we have Javascript!
• Reveal the menu using css, when the our hook is added by a toggle click.

Now, when Javascript is disabled you get:

1. Navigation!
2. Happy user.

You want code too?

As always, the best way to understand how this works is to see some code in action, so I did a quick fiddle to demonstrate what I’m talking about.

Just slap some pretty CSS3 on top and you’re done. A nice responsive, sliding, menu which leaves users without Javascript with a menu! If there is a downside, I honestly can’t see it.

Is there an even better way?

I’m sure there probably is. For starters, jQuery is hardly my forte!!

I would love to hear how you are approaching these issues and making navigation responsive, user-friendly, device-friendly and future-friendly.

Thanks.