Bulletproof CSS Sliding Doors

I have had to build a few sliding doors navigation menus in the last few weeks. I did a quick research and browsed though a few different implementations. To be perfectly honest, I found none of them satisfactory for various reasons. So I decided to crack the nut myself.

Click on the image below to skip to the demo.

The problems with existing implementations

1. Not fully clickable
Douglas Bowman’s original CSS Sliding doors only has one problem. There are 9 dead pixels to the left of every button. I wanted the entire button to be clickable.

2. Uses empty <span> tags
Although it is perfectly valid to have empty spans, even in XHTML 1.0 Strict, I would rather not take this approach. I would like my markup to make sense to future developers.

3. Causes inconsistencies in IE6
Kailoon’s One Image solution works perfectly. This is perhaps the most compatible solution there is. But there is a slight rendering issue in IE6. There is an extra bit of padding to the left of  each button. Off course, it can be fixed easily with a little Conditional CSS but it is not the ideal solution.

Also, kailoon adds a 4px padding to the anchors and then uses -4px margin on the <span> to cover it up. Although this mechanism works well, I am not a big fan of negative margins.

4. Breaks when font-size is increased
The most common with most of these implementation is that they cannot cope with increased font-sizes.

5. Uses li:hover which does not work in older browsers
The :hover pseudo-class is not supported by IE6 and below when applied to anything but an anchor. Hence, Stu Nicholls’ 100% Clickable Sliding Doors does not function as expected on older browsers. Otherwise, I really like his solution.

The Solution

We start with a simple unordered list wrapped in a div. Also, the list items have class names to they can be used in conjunction with body ID to highlight a particular tab.

The Markup

<div id="navigation">
<ul>
<li class="home"><a href="#"><span>Homepage</span></a></li>
<li class="products"><a href="#"><span>Products &amp;amp;amp; Services</span></a></li>
<li class="contact"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

The CSS

First off, I will add some basic styling.

#navigation {
background: url(images/navigation.png) top left repeat-x;
overflow: auto;
display: block;
float: left;
width: 100%;
}
#navigation * {
padding:0;
margin:0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}
#navigation ul {
display: block;
float: left;
padding: 10px 0 0 0;
}
#navigation ul li {
list-style: none;
float: left;
margin: 0 0 0 5px;
}

What I have done here is:

• Add blue background to the entire navigation. You can ignore most of it since it is meant only for the menu I designed. Keep the overflow: auto for clearing the floating unordered list.
• Resetting everything inside #navigation using the very powerful star (*) selector, so they have no margin and padding and so that they inherit the font properties.
• Remove list-style from list items and make them float left.

The Images

I am using 3 different images. Off course, you can combine the 3 images and use background-position to switch the background colour but I can’t be arsed.

One noticeable thing about the images is that they are quite big, almost 3 times as much as what they need to be. It is so if the font-size is increased or the page zoomed, the buttons will expand and will not seem broken.

The CSS for links

#navigation ul li a {
background: url(images/onlink.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e0ebf3;
text-decoration: none
}
#navigation ul li a span {
background: url(images/onlink.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}

At this point, all the links should look the same. If you inspect the code, you’ll see a 15px padding on the right of the anchor. Also, the image is on the right-hand side so that the rounded corners show up on the right.

The CSS for :hover and selecting current tab

#navigation ul li a:hover {
background: url(images/onhover.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation ul li a:hover span {
background: url(images/onhover.png) top left no-repeat;
}

#home #navigation ul li.home a {
background: url(images/onselected.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation ul li.home a span {
background: url(images/onselected.png) top left no-repeat;
}

The code here is quite self explanatory. The image onhover.png is applied on both the anchor and span for the hover effect.

The #home at the front is the body ID. If the body id is set to home, the list item with class=”home” gets the white background image to make it appear selected.

But what about Transparent Images?

If you are using transparent PNGs for the buttons, you will notice that the images overlap.If your images have shadows, the overlap will cause rather ugly results.

I admit I had been wrong on this matter. I stand corrected after a reader has taken the effort to use my code with transparent images and posted it on his website.

The solutoin is to split the images into 2 sections.

Create slices in Photoshop

In the example above, the anchor has a padding of 15 pixels to the right. So we are creating a 15px slice as saving it as a separate image.

Here is the CSS for the 2-image solution:

#navigation2 ul li a {
background: url(images/onlink2_right.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e8e8e8;
text-decoration: none
}
#navigation2 ul li a span {
background: url(images/onlink2_left.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}
#navigation2 ul li a:hover {
background: url(images/onhover2_right.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation2 ul li a:hover span {
background: url(images/onhover2_left.png) top left no-repeat;
}

#home #navigation2 ul li.home a {
background: url(images/onselected2_right.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation2 ul li.home a span {
background: url(images/onselected2_left.png) top left no-repeat;
}

By splitting the images into left and right, I have eliminated the chance of an overlap. It works on all major browser except IE6 because of the alpha-transparency issue. So I have created alternate PNG-8 versions of the images and added the !important hack to make it work in IE6.

Take this step only if you want to support IE6.

#navigation2 ul li a {
background: url(images/onlink2_right.png) top right no-repeat !important;
background: url(images/onlink2_right_IE6.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e8e8e8;
text-decoration: none
}
#navigation2 ul li a span {
background: url(images/onlink2_left.png) top left no-repeat !important;
background: url(images/onlink2_left_IE6.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}
#navigation2 ul li a:hover {
background: url(images/onhover2_right.png) top right no-repeat !important;
background: url(images/onhover2_right_IE6.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation2 ul li a:hover span {
background: url(images/onhover2_left.png) top left no-repeat !important;
background: url(images/onhover2_left_IE6.png) top left no-repeat;
}

#home #navigation2 ul li.home a {
background: url(images/onselected2_right.png) top right no-repeat !important;
background: url(images/onselected2_right_IE6.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation2 ul li.home a span {
background: url(images/onselected2_left.png) top left no-repeat !important;
background: url(images/onselected2_left_IE6.png) top left no-repeat;
}

Check out the updated demonstation.

Conclusion

In comparison to other methods, it is more functional, semantic and better supported in older browsers. It is also easier to deploy and maintain. Here is the live demo if you would like to see it in action. I have also done an extra theme with orange buttons (similar to Kailoon’s demos).

I hope you found it useful. Bugs, fixes and any feedback is very welcome.

References and Credits

CSS Sliding Doors by Douglas Bowman

CSS Sliding Door using only 1 image by kailoon

100% clickable Sliding Doors by Stu Nicholls

Sliding Doors meets CSS Sprites by FiftyFourEleven