Loon Design Tutorials . Comic . Web Design . Freelance . Blog

CSS Sliding Door using only 1 image

May 27th, 2008 in CSS, Tutorials by kailoon

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

I will not show how to create this but I will let you guys download the psd file as a reference. I provided 4 types of colors as default, you can edit them according to your preferences. Download the psd here and I even prepared the slices for you. What you need in building the navigation menu is only a 493px X 24px image like below.

Before we start, head over and see what we are going to achieve from this tutorial.

Concept

The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.

HTML

<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.

<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

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

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

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

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.