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.