CSS Sliding Doors: New Zesty Lo-Cal Recipe
Back in 2003, Douglas Bowman wrote a heavily bookmarked tutorial on a CSS technique characterized as ’sliding doors’ which results in lean, clean tabbed navigation. Instead of swapping in distinct fixed-width tab images for rollovers, Bowman’s method employs slivers of images which can ’slide’ together for smaller text and alternately slide outward to make room for longer text.
In total there are just four images: two for ordinary tab corners and two for rollovers, plus a hex value to fill the colors in between. This is a big time-saver if you have a client who needs the verbiage of his navigation to change often but doesn’t want a developer to resize and re-export the tabs in Photoshop each time.
After just three short years, I’ve finally gotten around to taking Bowman’s example and slimming it down considerably for my own purposes (is there a better way to spend free time over Xmas break?) Gone is the bounding div and the various padding and margin specs which were replaced with a universal selector. Also, I’ve used the white ‘current’ #id for the rollovers. Some overall bytes have been trimmed in the process, but more importantly the CSS and markup are more succinct and readable to my eye. Keep in mind, I omitted any styling for the anchor text itself. The point is to keep it simple and ugly in its generic form and to season it to taste for each new project.
Let me know if you have any issues with the result:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sliding Doors of CSS: New Zesty Lo-Cal Recipe</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
margin:0;
padding:0;
}
ul#nav {
border-bottom: 1px solid #000;
float:left;
width: 100%
}
#nav li {
float:left;
background:url("http://alistapart.com/d/slidingdoors/v1/left.gif") no-repeat left top;
padding-left: 9px;
}
#nav li:hover {
background:url("http://alistapart.com/d/slidingdoors/v1/left_on.gif") no-repeat left top;
}
#nav a {
float:left;
display:block;
background:url("http://alistapart.com/d/slidingdoors/v1/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
}
#nav a:hover {
background:url("http://alistapart.com/d/slidingdoors/v1/right_on.gif") no-repeat right top;
}
li#current {
background-image:url("http://alistapart.com/d/slidingdoors/v1/left_on.gif");
}
li#current a {
background-image:url("http://alistapart.com/d/slidingdoors/v1/right_on.gif");
color:#333;
padding-bottom:4px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products & Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
A working example can be viewed here. Enjoy.
Popularity: 1% [?]
Great css code!
Hey Darren, thanks for this post. I have been trying my hardest to figure out how to do the sliding doors technique dynamically within Wordpress. Would you have any clue on how to do this? I’ve almost got it, but I can’t figure out how to get the span in there dynamically.
Any help is much appreciated.