Adding Navigation to the Skeleton

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

The first step is to insert an unordered list to your page.

Example:

	<div id="main-navigation" class="row" >
	<div id="nav">
	<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-->

view raw Added HTML Navigation Code hosted with ❤ by GitHub

Next, CSS is used to create the drop-down effect.

Example:

	*{ margin:0px; padding: 0px; }
	#nav {
	font-family: arial, sans-serif;
	position: relative;
	width: 390px;
	height:56px;
	font-size:14px;
	color:#000;
	margin: 0px auto;
	}
	#nav ul {
	list-style-type: none;
	}
	#nav ul li {
	float: left;
	position: relative;
	}
	#nav ul li a {
	text-align: center;
	border-right:1px solid #000;
	padding:20px;
	display:block;
	text-decoration:none;
	color:#000;
	}
	#nav ul li ul {
	display: none
	}
	#nav ul li:hover ul {
	display: block;
	position: absolute;
	}
	#nav ul li:hover ul li a {
	display:block;
	background:#12aeef;
	color:#ffffff;
	width: 110px;
	text-align: center;
	border-bottom: 1px solid #f2f2f2;
	border-right: none;
	}
	#nav ul li:hover ul li a:hover {
	background:#6dc7ec;
	color:#fff;
	}

view raw DropDown CSS hosted with ❤ by GitHub

There are some necessary tweaks needed to get around some of the CSS in columnal.css.

.row {clear: both; width: 100%; max-width: 1140px; margin: 0 auto; overflow: hidden;}

and

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 {float: left; margin-right: 3.8%; position: relative; }

The "overflow: hidden" and "position: relative" settings combined will cause the drop-down effect to be hidden by other elements just below the navigation menu.

To compensate, I have made some changes to "custom.css".

#main-navigation
{
background-color:#ffffff;
height:5em;
overflow:visible;/* overrides the overflow:hidden setting in columnal.css */
}

and

#content-text
{
padding:.5em 0 .5em 1em;
position:static;/* overrides the position:relative setting in columnal.css */
}

Now for added spice, I have included a jQuery effect that performs a "fade in" when you hover over the navigation.

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	$("#nav li").has("ul").hover(function () {
	$(this).addClass("current").children("ul").show().hide().fadeIn(500);
	}, function () {
	$(this).removeClass("current").children("ul").stop(true, true).css("display", "none");
	});
	});
	</script>

view raw FadeInOnHover hosted with ❤ by GitHub

Click ((here)) for the project code.

Click ((here)) for an example of the code.