Creating popup navigation to the skeleton

This post expands on "Create a Responsive HTML/CSS Skeleton". I will explain one of the ways you can add popup navigation to your mobile site.

Popup navigation can add a lot of usability to you site when viewing it on smaller devices such as smart phones.  An example of this functionality can be viewed on the Starbucks website.

Navigation Hidden

Navigation Visible

 The idea is to include a button to toggle the visibility of the navigation on and off. I will include some jQuery animation to slowly grow and shrink the navigation box just like the Starbucks website does.

Fist you will need a button to display control the animation.

Example:


Second, create a container with an unordered list for the navigation content.

Example:


Third, style the CSS to hide the popup navigation container.

Example:


Fourth, create jQuery code to detect the HTML content of the button and grow or shrink the popup navigation container.

Example:



Click ((here)) for the project code.

Click ((here)) for demonstration of the code.  Make sure you size your browser below 1000px width to see this effect.