CSS Navigation Menu: Basic

CSS Navigation Menu: Basic

Creating a Navigation Menu using CSS is not hard when you know the basic steps involved. In this basic tutorial we’ll go through the necessary code; both HTML and CSS,  you’ll need to understand to build this navigational menu and others like it. We’ll also show you an easy way to add a highlighted state to your navigational item.


Example

Would you like to see a working example of this navigation? If so, here it is.

Step 1: The HTML
<div id="header">
<div id="nav">&nbsp;
   <ul>
     <li><a href="work.html">OUR WORK</a></li>
     <li class="highlight">NEWS</li>
     <li><a href="about.html">ABOUT</a></li>
     <li><a href="contact.html">CONTACT</a></li>
   </ul>
</div>
</div>
Step 2: Create a CSS file

Create a CSS file and be sure that the CSS is linked in the head of your HTML file.

<link href="style.css" rel="stylesheet" type="text/css" />
Step 3: Add basic CSS

Zero out your margins and padding using the * (universal selector type) and zero out the top and left margins of your body. The header has a defined height and a background image with a bit of gradient.

The div named “nav” is positioned with some padding, margin, given a width, and is floated to the left.

*{
    margin: 0px;
    padding: 0px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #f6f5f4;
}
#header {
	height: 150px;
	background-image: url(images/header.png);
}
#nav {
	margin-left: 43px;
	padding-top: 15px;
	width: 400px;
	float: left;
}
Step 4: Add style to the list tag
  • Remove the bullets with list-style-none
  • Float left
  • Add the width of each list item
  • Select font family, size, letter spacing and align to center
  • The line-height of 25px defines height of the list item.
#nav li {
	list-style-type: none;
	float: left;
	width: 90px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-align: center;
	line-height: 25px;
}
Step 5: Add style to the a:link and a:hover states
  • Select color for text
  • Remove underline with text-decoration none
  • Adding display block will allow the background color or image to fill up the entire width and height and will give you the look of a “button.”
  • Select color for hover state
  • Insert background image and add repeat, if necessary.
#nav li a {
 color: #f6f5f4;
 text-decoration: none;
 display: block;
}

#nav li a:hover {
 color: #333;
 background-image: url(images/nav_on.png);
 background-repeat: repeat-x;
}
Step 6: Create a class for the highlighted state
  • Note that the selector type called class has a “.” in the front of the name.
  • Select color for text
  • Add background image
  • Add a border on the right and left that’s solid, #999 and 1 px.
  • In the HTML from Step 1, the class is already attached to the li item. This is necessary in order for the highlighted state to be visible.
.highlight{
	color: #333;
	background-image: url(images/nav_on.png);
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999;
	border-left-color: #999;
}
Congratulations. You’re done. And you just created a Navigation Menu completely with CSS! – Awesome.

 


 

Need More Help?

If you need more help, the video below is from TImothy at Create The Net and is very helpful. A slightly different approach, but a great resource.

Creating CSS  Navigation: Creating a simple horizontal rollover menu

Other videos from Create the Net

Leave a Reply

Your email address will not be published. Required fields are marked *