Basic CSS Navigation

This new tutorial is one of the basic CSS tutorials. The tutorial that I?m writing here is for the navigation. In this tutorial; there will be two types of navigation, the horizontal and the vertical. The shortest code of the two is the vertical navigation cos there?s no need to define float. With this tutorial, it is really good for beginners to learn so they will know on how to create their own navigation. If your using this tutorial together with my Image Hover tutorial, it will give your website a nice and elegant design only if you know how to design website using Photoshop.

VIEW DEMONavigation

Step 1
For this step; The HTML code bellow are for Horizontal navigation and Vertical navigation. This two type navigation will have an individual layer.

<div id="horizontal">
  <h1>HORIZONTAL NAVIGATION</h1>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<div id="vertical">
<h1>VERTICAL NAVIGATION</h1>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Step 2
We will now begin the coding for the CSS guys. First I will code the global CSS code because I am using unordered list for both navigation.

ul{
  margin:0;
  padding:0;
}
ul li{
  margin:0;
  padding:0;
  /*This code here is to removed the bullets of your unordered list.*/
  list-style:none;
}

Step 3
For our step here is to define a global CSS code for the navigation. Please read the CSS comment for you to learn each CSS code.

#horizontal a, #vertical a{
  /*This code will help you control the size of your anchor link.*/
  display:block;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  /*Never forget to define width if your using display:block; for your link.*/
  width:100px;
  /*Default background color of your navigation.*/
  background-color:#CCCCCC;
  border:1px solid #000000;
  text-decoration:none;
  color:#000000;
  padding:5px 0 5px 0;
  /*To control the position of your text inside your anchor link.*/
  text-align:center;
}
#horizontal a:hover, #vertical a:hover{
  background-color:#999999;
  color:#FFFFFF;
}

Step 4
We will now start the coding for horizontal navigation. To properly change the position of your navigation is to define float:left; so your vertical navigation will change to horizontal navigation. Please read the CSS comment.

#horizontal{
  height:100px;
}
#horizontal ul li{
  /*As you can see guys; I defined float to left for <li></li> so it will be compatible in IE6*/
  float:left;
  /*This margin here is to adjust the spacing in each side of your menu.*/
  margin:0 5px 0 0;
}
#horizontal ul li a{
  /*Same goes here. Define float to left.*/
  float:left;
}

Step 5
And for the last step is the code for vertical navigation. Very short isn’t it. Hehehe the code is just only to adjust the bottom margin so that your navigation will look good.

#vertical ul li{
  margin:0 0 5px 0;
}