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;
}