One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.

Problem

The screenshots below show the navigation layout issues on mobile. If the navigation has 3 or 4 buttons like Web Designer Wall, then the navigation won't wrap into two lines. But if the navigation contains 6 or more buttons, they will stack on top each other.

Solutions

1) Dropdown

One of the commonly used solution is to convert the navigation into a select dropdown. I'm not a big fan of this approach because the <select> element is not stylable with CSS. Javascript plugins like Chosen enables you to modify the dropdown menu, otherwise you end up with the default system dropdown styles. It also causes inconsistent user experience where the desktop version displays link tags and the mobile version displays as a dropdown menu. If you like this solution, here is a tutorial by CSS-Tricks on how to convert a menu to a dropdown.

2) Display as Block

Another quick fix is set each menu item as block elements so they display vertically. But this approach takes a lot of header space. If the navigation has many buttons, this is a bad idea because the readers have to scroll down through the long list of navigation before reaching the content.

3) Menu Icon

The last solution that I'm going to review is to use a menu icon/button to toggle the navigation. I like this method out of the three because it saves space (very important on mobile) and it gives you full control of styling with CSS. The menu icon can be styled to match with the overall design.

This tutorial shows you how to create a mobile navigation with jQuery as seen on the sites listed above. jQuery will be used to prepend the menu icon and toggle the navigation. This trick doesn't require any extra/un-semantic HTML tags.

HTML

jQuery Code

Include a copy of jQuery and the function below in between the <head> tag. The function will prepend the <div id="menu-icon"> in the <nav id="#nav-wrap"> tag. When the #menu-icon element is clicked, it will slide down the navigation.

CSS

I'm not going to explain every detail of the CSS code because it is pretty straight forward. Instead, I will talk about the key parts.

The #menu-icon is set to display:none initially. I used media query to change the #menu-icon to display:block if the viewport width is smaller than 600px.

In the media query, I set the navigation to display:none so it is hidden initially on mobile. When the #menu-icon is clicked, it will toggle the navigation as specified in the jQuery function at the above step.

Final Demo

To see the final mobile navigation, view the demo and narrow your browser window or check with your mobile phone.

Unfortunately this script seems to break in mobile when the menu is set to a fixed position. I’m doing a one page site and want the menu to be permanently attached to the top of the screen, and for the links to link to content further down the same page, but when I do that the menu becomes unresponsive on the phone after the first link is clicked, unless i scroll the page slightly.

I don’t encounter this problem when viewing on the desktop. Is anyone else having this problem, and does anyone have a workaround? Much thanks if you do.

Joe RaySep 17, 2012 @ 14:20

Actually, in answer to my own question, turns out this is a known bug in iOS 5. There’s a whole thread on it at stackoverflow, with a bunch of possible solutions, none of which have worked for me so far, but some of them may be of use to others having this problem.

This was not nice at all….i tried it using opera mobile browser and the nav did not even show up. I thought i did some coding error but i tried your online demo link and the same thing. Did you consider mobile browsers without JavaScript support..Such as opera mini and bolt…Nice post too.. Please find a fix for non-JavaScript browsers