Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Wednesday 3rd of September 2014

Responsive Menu using CSS and jQuery



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.











That's it guys...



Comments
0

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement