simonshullfoust.com

The Sliding Doors Technique

I had a project recently that needed tabbed navigation with a curved image style. In order to build this navigation correctly while complying with certain standards (such as compatibility with various text sizes), I decided to use a version of the sliding doors technique, which I will explain in this post.

First, let me show you a screenshot of what the tabbed navigation is to look like:

What we want to do is use a simple list with images as the backgrounds to elements, and arrange things so that the <li>’s stretch while keeping the tabbed design intact.

So, first we’re going to begin with a simple list, which we’ll give an id of “nav”:

<ul id=”nav”>
<li><a href=”">About Us</a></li>
<li><a href=”">Current Studies</a></li>
<li><a href=”">Registration</a></li>
<li><a href=”">Sponsors</a></li>
</ul>

Next, we’ll begin the css for this nav list. We want to make sure we specify that the list should have no bullet points (style: none), and the it should be a horizontal list (the <li>’s should float: left). So:

#nav {
list-style: none;
}

#nav li {
float: left;
}

Next we’ll work on the curves. What we need is one image for the bottom left curve and another for the bottom right curve, and then we’ll set one to overlap onto the other. This means that one element will have a background image like curve-left.gif and another element will have a background image like curve-right.gif. To do that we’ll use the <li> element and the <a> element. First, the images:

Notice that I made the images much higher and wider than the original screenshot. This is because they need to be that way in case a user wants to set his browser settings to display text larger than default.

Next we need to add to the css of our <li>:

#nav li {
float: left;
background: url(’images/tab-left.gif’) bottom left no-repeat;
}

Finally, we add the other background image to the element:

#nav li a {
background: url(’/wp-content/uploads/2007/09/tab-right.gif’) bottom right no-repeat;
display: block;
}

A few font, link styling, and padding adjustments, and this is the final result: Sliding Doors Tabbed Navigation | full html | full css

Tags: css
Written by Simon Shull Foust on September 14th, 2007 · Comments (0)