CSS Navigation Bar With Only 1 Image

Posted by jcargoo | Tuesday, January 20, 2009
| 0Delicious Twitter Reddit Digg Loading...


This is a technique which can help to develop a nice navigation bar using only one image for all link buttons.
The image was simply created thanks to Microsoft Office Powerpoint 2007!
Why I am talking about only 1 image? Because using only 1 image will increase the processing time as well as

the bandwidth if you compare this with using 5 images (in this example we have 5 links).

This is the image we will use (click over it if you want to get the real size):

In order to hold a part of the image, we will use a span inside the link in the list (the list represents the whole navigation bar).

HTML
<ul class="image">
<li><a href="#" title="Home" class="current"><span></span>Home</a></li>
<li><a href="#" title="Tutorials"><span></span>Tutorials</a></li>
<li><a href="#" title="Archives"><span></span>Archives</a></li>
<li><a href="#" title="About"><span></span>About</a></li>
<li><a href="#" title="Contact us"><span></span>Contact us</a></li>
</ul>

CSS

ul:

Nothing to really explain here as every thing seems to be clear. We want to say that we don't want any kind of bullet in our navigation menu so this is why we have list-style set to none. We have defined some borders to make a beautiful navigation bar. <li> and <span> will have float left so same thing will be defined in the current <ul>. Using float: left, you can place whatever below your CSS navigation menu and it will display alongside the menu and not below it.

ul.image {
padding: 3px;
list-style: none;
background-color: #fff;
border-bottom: 1px solid #E8E8FF;
border-left:1px solid #E8E8FF;
float: left;
clear: left;
}

li:
As mentioned above we use float with left value for <li>. The used margin value is for the space between the list buttons.

ul.image li {
float: left;
}

ul.image li a {
float: left;
text-decoration: none;
color: #E2E4EC;
padding: 3px 19px 0 0;
margin-right: 15px;
font: 700 14px "Georgia", Helvetica, sans-serif;
}

span:
ul.image li a span {
float: left;
padding-right: 19px;
display: block;
margin-top: -3px;
height: 30px;
}

hover and current:
I wanted to not combine following CSS codes to make thnings clear regarding when we hover a link, hover over a span, and when the current button is activated.

ul.image li a:hover {
color: #1A61A9;
background: url(1.png) no-repeat top right;
}

ul.image li a:hover span {
background: url(1.png) no-repeat top left;
}

ul.image li a.current {
background: url(1.png) no-repeat top right;
color: #1A61A9;
}

ul.image li a.current span {
background: url(1.png) no-repeat top left;
}



How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.




Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

1 Previous Comments
  1. loic | January 21, 2009 at 5:44 AM  

    great example thanks jcargoo