Close Menu Navigation
Open Categories Menu CSS Navigation Menu: Basic
- 16 October, 2011 -
- beginner, build -
- Tags :
- 0 Comments
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">
<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
