Responsive navigation with noscript fallback

My initial mobile navigation solution left a lot to be desired.

So it was back to the drawing board. I started to analyse how other solutions worked, and was looking everywhere for inspiration and a suitable solution. About two days later I caught a tweet to this article by Brad Frost.

One of the things I liked in the article is Brad listed the pros and cons for each solution.

After reviewing Brad's list my two favourite solution were:

'The toggle' Approach

The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header. It's a good-looking approach and is relatively easy to implement

followed by:

'The Footer Anchor'

This clever solution keeps the navigation list at the footer of the site, while the header contains a simple anchor link pointing to the footer navigation. This approach clears up a lot of room for the core content while still providing quick access to the navigation.

I have a preference for navigation menus, which while user friendly do not impede on the limited screen space of small devices, such as smartphones and hand held gaming devices.

One of the cons with 'the toggle' is it's dependency on javascript. By contrast, one of the pros of "the footer anchor" is that it is not dependent on javascript. However, to their credit both solutions maximise mobile real-estate.

The Hybrid solution

I decided to use both approaches to maximise screen real estate. For uses with javascript they would receive "The Toggle" navigation and for users with NO javascript they would be receive the fall back "The footer anchor" navigation.

Coding the Hybrid Solution

responsiveNavigation

Use of the <noscript> tag was used in the footer and also the header shown above in orange. Running next to the toggle but with only one solution ever visible at any given time.

responsiveNavigation2

On the smallest style sheet the <noscript> footer and link are only visible when javascript is off. The javascript toggle is hidden by default and turned on via the javascript by adding a class to the html.

responsiveNavigation3

On the tablet css document the no script tags are hidden and the menu up top is visible by default.