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.
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.
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.
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.
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>
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.
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>
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.
To see the final mobile navigation, view the demo and narrow your browser window or check with your mobile phone.
Also read this CSS Based Responsive Navigation Menu tutorial.