Posted: Wednesday 3rd of September 2014

This tutorial teaches you how to design a responsive navigation or menu using CSS and jQuery.

If you go through this website properly, you will notice that we have redesigned the site to make it responsive to screen size which has brought about the release of this tutorial.

Responsive design has basically become a staple to any modern website. Having this in mind, navigation must be ready to adjust to the various screen sizes possible. As you'd imagine, a 10 item long horizontal menu doesn't translate well to a cellphone' screen. However, with a bit of proper tweaking, we can make a proper responsive menu for use on mobile or small screen size.

Considerations
Throwing in a dash of media queries is not all that is required to make a menu responsive. You have to know what type of menu you are working with, how you want it to display, and how it behaves. Use the following check list to help guide yourself:

Count
If your menu has a fixed amount of 3 or 4 items, you can most likely avoid needing any "special" mobile adjustments. This depends on the text though, as 4 long words would most likely cause an over flow problem.

Orientation
For the most part, if you have a vertical menu, you are already set. Vertical menus are the standard format for most mobile devices, as the portrait mode lends itself to that style. In the case of a long horizontal menu, what you'll end up doing is styling it so that at lower resolutions it basically converts into a vertical menu instead.

Wrapping
Usually, a long horizontal menu will want to remain as horizontal as possible until necessary. However, once you get into tablet portrait resolutions, that may become difficult. You'll have to decide whether you're okay with the menu wrapping its items, or alternatively, you can add a class to specific menu items that you don't mind simply hiding for mobile users.

This is a very simple to understand application as all you need to do are well explained in the script.

The script is very easy to understand and customize with programming code comments to ease usability.

To see the system in action, please click on the demo button below and download the script if you like what you see.

Download Live Demo