LoonDesign - A Tutorials and Comic Blog | Photoshop and Illustrator | WordPress Theme.

Before I know about this technique, I was using different images for each of the button I needed in a navigation bar. I found that it is not user friendly and also need more CSS coding. Besides, it is increasing the processing time and bandwidth in loading a site. In this tutorial, I will show you how to code the navigation bar using only 1 image. I will not cover the image creation part because I think you should know how to do that after follow few of my tutorials in the past. So, start here…

The Image

Concept

HTML

1
2
3
4
5
6

<ul class="blue">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="products">products</a></li>
    <li><a href="#" title="blog">blog</a></li>
    <li><a href="#" title="contact">contact</a></li>
</ul>

This is a normal code to create a list. I assign a class for the <ul> (unorder-list) so that I can easily reuse the whole thing with different style but same structure.

1
2
3
4
5
6

<ul class="blue">
    <li><a href="#" title="home" class="current"><span></span>home</a></li>
    <li><a href="#" title="products"><span></span>products</a></li>
    <li><a href="#" title="blog"><span></span>blog</a></li>
    <li><a href="#" title="contact"><span></span>contact</a></li>
</ul>

Now, I add in a <span> for each of the link to hold the left hand side of the background image.

CSS

1. <ul> - Unorder-List

1
2
3
4
5
6

ul.blue {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the <span> and also <li>. I am not going to define a width for it because this is just a sample.

For your information, you need to define a width for the container which you had float it.

2. <li> - List

1
2
3
4
5
6
7
8
9
10
11
12

ul.blue li {
	float: left;
}
 
ul.blue li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

Like what mentioned just now, there is a float for the list. padding right for 15px is for the space between the edge of the image and the link text. The margin here is for the space between the list.

3. <span> - span within the link

1
2
3
4
5
6
7

ul.blue li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

For the span, we use padding right for the same purpose. However, I add a -4px margin-top because I I have a 4px padding top for the link.

4. <Hover> - mouse over action

1
2
3
4
5
6
7
8

ul.blue li a:hover, ul.blue li a.current {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}
 
ul.blue li a:hover span, ul.blue li a.current span {
	background: url("images/blue.png") no-repeat top left;
}

Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.

Conclusion and Download

This is a very useful technique which you can re-use in page with only 1 image. It is easy to use and I hope that you guys can understand my poor English explanation. Any question, just send me an email or drop me a comment here.

Downloaded a total of 1949 times