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:

	<div id="popup-nav-button">
	<button id="btnPopup">Show Nav</button>
	</div><!--end popup-nav-button-->

view raw popup-nav-button hosted with ❤ by GitHub

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

Example:

	<div id="popup-nav-content" class="row">
	<div id="main-nav-popup" class="row" >
	<div id="nav-popup">
	<ul>
	<li class="first"><a href="#">Home</a>
	<ul>
	<li><a href="#">Home1</a></li>
	<li><a href="#">Home2</a></li>
	<li><a href="#">Home3</a></li>
	</ul>
	</li>
	<li><a href="#">About Me</a>
	<ul>
	<li><a href="#">About Me1</a></li>
	<li><a href="#">About Me2</a></li>
	<li><a href="#">About Me3</a></li>
	</ul>
	</li>
	<li><a href="#">Portfolio</a>
	<ul>
	<li><a href="#">Web</a></li>
	<li><a href="#">Print</a></li>
	<li><a href="#">Photos</a></li>
	</ul>
	</li>
	<li><a href="#">Contact Me</a>
	<ul>
	<li><a href="#">Contact Me1</a></li>
	<li><a href="#">Contact Me2</a></li>
	<li><a href="#">Contact Me3</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div><!--end main navigation-->
	<!--end added nav-->
	</div><!--end popup-nav-content-->

view raw popup-nav-content hosted with ❤ by GitHub

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

Example:

	#popup-nav-content
	{
	display:none;
	background-color:#0000ff;
	font-size:1.5em;
	height:6em;
	margin:0;
	}

view raw popup-nav-content css hosted with ❤ by GitHub

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

Example:

	<script type="text/javascript">
	$(document).ready(function () {
	$("#btnPopup").click(function () {
	var div = $("#popup-nav-content");
	var btn = $("#btnPopup");
	var btnHTML = btn.html();
	if (btnHTML == "Show Nav") {
	btn.html("Hide Nav");
	div.css("display", "block");
	div.animate({ height: '300px' }, "slow");
	}
	else
	{
	btn.html("Show Nav");
	div.animate({ height: '0px' }, "slow");
	}
	});
	});
	</script>

view raw btnPopup hosted with ❤ by GitHub

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.