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.

View Demo Mobile Nav

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.

bitfoundry

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.

smashing magazine
iA

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.

forefathers
love and luxe
london and partners

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.

sony
bootstrap
image
prl

Mobile Navigation with jQuery (view demo)

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

Below is the sample navigation HTML used in this tutorial:


<nav id="nav-wrap">

	<ul id="nav">
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>

</nav>

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.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>

It will render the HTML code like this (you need to Inspect Element or view generated source code to see this):


<nav id="nav-wrap">

	<div id="menu-icon">Menu</div>

	<ul id="nav">
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>

</nav>

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.

css explain

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.

final demo

Update:

Also read this CSS Based Responsive Navigation Menu tutorial.

118 Comments

1 3 4 5
  1. Diana
    Aug 21, 2012 @ 9:23 pm

    Thanks Nick, though mine is somewhat different I loved this effect!

    Reply

  2. Michael Meininger
    Aug 28, 2012 @ 12:31 pm

    Fantastic Write up and eager for more mobile site solutions

    Reply

  3. seo
    Aug 30, 2012 @ 2:58 am

    Thank you so much for this list, it really helps me out!

    Reply

  4. amy sidra
    Sep 5, 2012 @ 3:14 am

    thank’s bro. very usefull. i will apply it to my website

    Reply

  5. Joe Ray
    Sep 9, 2012 @ 1:25 pm

    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.

    Reply

  6. Georgios
    Sep 14, 2012 @ 6:08 am

    Very useful and informative post. Thank you.

    Reply

  7. selahattin
    Sep 15, 2012 @ 7:01 am

    mobile design is really important.

    Reply

  8. Ant
    Oct 2, 2012 @ 10:38 am

    Thanks for the tutorial, very simply and a elegant approach. Would this work on a WordPress menu?

    Cheers,

    Ant

    Reply

  9. Marcus
    Oct 4, 2012 @ 2:23 am

    Thanks! Chosen is a good plugin which I will use on some apps.
    In past I have the only styled by setting the text-size with padding, margin etc..

    Reply

  10. Joseph
    Oct 11, 2012 @ 7:05 am

    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

    Reply

  11. vishnu
    Oct 14, 2012 @ 3:30 pm

    Another superb article. Liked it :-)

    Reply

  12. Holistic medicine
    Nov 14, 2012 @ 12:02 pm

    I was racking my brain there for a while looking for a solution. Great article btw!

    Reply

  13. Iacho
    Jan 30, 2013 @ 8:41 pm

    Thank you so much. I’ve been looking for this for days and here it is. All I needed was a simple menu and everything I found was super-complex ones.
    Really, thank you very much.

    Reply

  14. Mike
    Jun 21, 2012 @ 11:29 am

    Sorry about the last comment. it works now. How do you restrict the page width when in portrait mode?

    Reply

1 3 4 5

Leave a Reply