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. 

Create a Responsive HTML/CSS Skeleton

The best way to learn HTML and CSS is to create a project. This responsive website skeleton I have created will help you understand the basics of positioning, flow and responsiveness, It also can be used as a starting point for any web page design.

Here are the major topics I will cover:

• Using the Columnal CSS framework.
• Media queries
• Using the Chrome debugger

Using the Columnal CSS framework

Many CSS page layout framework exist, but I will be concentrating on just one of them for simplicity. The Columnal Framework divides the page into 12 columns for easy placement. CSS frameworks like this make it easier to create a responsive website. To use it, simply download the CSS file from their web site and use the classes they have set up.

Example:

The class "col_8" will take up 8 vertical columns.

Media queries

CSS media queries enable your website to find out the resolution, pixel density and other important display information about the end user's screen. This information will make it possible to create a user-friendly version of your website.

Using the Chrome debugger

The Google Chrome debugger is probably the best free developer's tool out there. It's fast and simple to use. I will only get into a small subset of it's capabilities for this lesson.

Let's Get Started

 Creating a mock-up in an image editing program such as Photoshop is the first step. I will create two versions. One for a desktop display and one for a mobile display.

Example:

---

Desktop View

---

Mobile View

---

One school of thought states that the smallest mobile version should be coded before the largest desktop version. While you are coding the HTML and CSS for this skeleton, you should continually check your results in Google Chrome. If there is a problem, switch to the Chrome debugging tool by clicking CTRL-SHIFT-I in Windows. Right click on any element in the page and select "Inspect Element" which will highlight the selected element in the "Elements" tab and show the element's styles in the "Style" box to the right. When you hover over the style in the "Style" box, you will notice that a box appears next to the style. You can check this box to turn on and off the style. Also, you can click on the style to edit it. New styles can be added by clicking just below the last style in the class. An insertion box will appear allowing you to type in a style with a value. More information on the Chrome debugger can be found at "Introduction to Chrome Developer Tools, Part One" by Seth Ladd.

When changing the widths of elements on the page, try to stick to the pre-made classes from the Columnal Framework. To include this framework, just visit the Columnal web site and download a copy of the framework.

Use divs with background colors to create horizontal lines since the visibility of the "hr" tag cannot changed.

Create a CSS styles file which has two sections. One for desktop and one for mobile. Setup the mobile version with a CSS media of about 1000 pixels to make it easier to diagnose problems when you are simulating a mobile device screen size on your desktop machine.

Example:

@media only screen and (max-width : 1000px) {
/*CSS styles for mobile version to go here*?
}

The media query can be adjusted later to the true target screen size in the final stages of development.

To make elements appear and disappear by changing the display style. Make sure to keep the design simple to test flow and continue checking the appearance in Chrome.


Click ((here)) for the project code.

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