CSS Sliding Door using only 1 image

May 27th, 2008 in CSS, Tutorials by

css sliding door buttonBefore 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

css sliding door button

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.

css sliding door button

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>

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

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

CSS

1. <ul> – Unorder-List

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

ul li {
	float: left;
	display: inline; /*For ignore double margin in IE6*/
	margin: 0 10px;
}

ul li a {
	text-decoration: none;
	float:left;
	color: #999;
	cursor: pointer;
	font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
	margin: 0 10px 0 -10px;
	padding: 1px 8px 5px 18px;
	position: relative; /*To fix IE6 problem (not displaying)*/
	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.

4. <Hover> – mouse over action

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

ul.blue li a.current span, ul.blue li a:hover 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.

Compatibality, Conclusion and Download

This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. 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.

Update ( 10th Decemeber 2009 )

Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope you guys enjoy this little trick!

Download
add RSS

Comments

New to Old.

Reply

Write your comment here...




XHTML::
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Dribbble

Some of my recent works from dribbble, do check it out and leave me some feedbacks! Or follow me on dribbble and get updated.