Create a Navigation Bar for your blog with Rollovers using just CSS

Hello everyone, good day to all of you. Let me teach
to you "How to create a navigation bar for your blog with rollovers using
just CSS codes". I know most of you wants to create a cool navigation bar
for your blogs/websites right? Specially a navigation bar with rollovers.
But you're having a hard time to create one. Before you get crazy searching
the web for tutorials on how to create a navbar with rollovers.

I  will teach you how to create one using very easy steps.

But before we proceed, lets differentiate first an ordinary navigation bar
from a navigation bar with a rollover. An ordinary navigation bar would
look like this:

Navbar  
While a navigation bar with a roll over would change background
color whenever the cursor hovers the navigation bar. Lets say we
hover the cursor to "blog summary" Blog summary will roll over
and will turn like this:

Navbar 2
A great example of a navigation bar with rollover is the navigation
bar of this blog. Try hovering your cursor on the different areas in
the navigation bar and you will see the effects of rollovers.

Now that you know what a navigation bar with a rollover is, lets proceed on
making one using CSS.

1.) First, we will deal with sorting our links.

<div id="nav">
  <ul>
    <li><a href="http://homeaffiliate.typepad.com/#">Home</a></li>
   
<li><a href="http://homeaffiliate.typepad.com/homeaffiliate/about-home-affiliate.html/#">About</a></li>
   
<li><a href="http://homeaffiliate.typepad.com/homeaffiliate/blog-summary.html/#">Blog
Summary</a></li>
    <li><a href="http://homeaffiliate.typepad.com/homeaffiliate/health-and-fitness.html/#">Health
& Fitness</a></li>
    <li><a href="http://homeaffiliate.typepad.com/homeaffiliate/make-money-online.html#">Make
Money Online</a></li>
  </ul>
</div>

You do not have to use a div, you can also use it within a table cell.

This just sets out your links using bullet points like this:

  • Home
  • About
  • Blog Summary
  • Health & Fitness
  • Make Money Online


2.) The first bit of CSS code we will do is to apply a border around the
     whole div/td:

#nav-list
{
background-color: #4C4646;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

I am using an ID (note the #), you could also use a class (which would
use a .
instead) if you are using multiple duplicated navigation bar
use the class so
you won't have any problems with W3C validation.


3.) Now we will apply some CSS to format the layout to our ul tag:

#nav ul{
  width:100%;
  background-color:#4C4646;
  padding-left:0;
  margin:0;
  float:left;
}

This keeps the navigation bar to the left with the float tag. It also

stretches the whole page/table cell. The margins and padding allow the

lists to lose their default formatting.


4.) Now we need to format each li tag.

#nav ul li{
  display:inline;
}

This will make all the items in the li tags lined up next to each other
rather than on seperate lines.


5.) Now we need to apply some CSS for our links within the li tags:

#nav ul li a{
  float:left;
  color:#FFFFFF;
  padding:6px 12px 6px 12px;
  border-right:1px solid #FFFFFF;
}

This applies padding to each link to make it look more like a button

rather than a short link. With the padding, the first figure is the top

padding, followed by the right padding, followed by the bottom then
the
left padding. The border-right seperates each link with a small
border
which uses the full height of the navigation bar which makes
the links
look more like buttons.

You can also add in other text formatting or you can use the formatting
of the main links on the page.


6.) To add a rollover we just need to add this small bit of CSS:

#nav ul li a:hover{
  background-color:#000000;
}

This will change the back ground color to a black.

Of course you can always change the rollover background color of your
choice. Here's the list of HTML color codes you can use to change
the background color.

Now you know already how to create your own navigation bar with
rollover using CSS. I hope this helps. Thank you and Have a nice day.

 Freebies:

visit my blog homeaffiliate to get your copy and paste CSS code for a navigation bar with Rollover.

Recent Posts by samjien

Menu