An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

For the curious and impatient, Example A, B.

The requirements

A project we've been working on required a different colored set of tabs for navigation depending on the section that the users were using. We needed three color variations and we wanted to be able to easily change the colors used by the tabs without too much markup or image hassle.

The options

I'm a huge fan of the sliding doors method, and the navigation matrix, but trying to come up with something compact and efficient that could run different color combinations required something a little different.

Before we get into the code and details, it is recommended that you read Sliding Doors of CSS I and II and the Mountaintop Corners articles at Alistapart.

The idea

For awhile now I've been wanting to try and use Dan Cederholm's mountaintop corners together with the sliding doors method, and this seemed like the right time.

The idea would be to cap the tabs with mountaintop corners, and fill the tabs with the desired background-color rather than an image. The tabs themselves would be build using a slightly modified sliding doors method.

Making it happen

We build from example 8a of Sliding Doors of CSS 2, as it is a complete cross browser version of the tabs. This method uses extra spans that allow for Internet Explorers lack of handling pseudo-classes on anything other than anchors (otherwise we'd need a little javascript help).

Starting with this example, making a mountaintop version is quite simple. The following documents contain examples of the method. Where the CSS deviates from the original sliding doors method, comments have been made.

1. Example A that is inspired by the simple yet functional tabs used over at Digital Web.
2. Example B showing three different versions of the tabs, and the switches needed to do so (invalid becauase of the multiple id's).

The Results

Some observations

There are a couple of things worth noting here:

1. An image does have to be created, following the methods outlined in the mountaintop corners article.
2. The CSS is simplified compared to the sliding doors method, however the tabs do look a little lower tech.
3. By using an extra 1px pad on the 'current' tab, the background color of the ul bleeds under the list and acts as an underline (as it is on Digital Web). If preferred, on can add an underline to the image (the single image) and build the underline as in the original sliding doors example.

Why bother?

Quite simply, we needed a soluton that wasn't going to result in loads of CSS from the three different versions. However, even as a standalone version, the CSS is a little lighter, and compared to the Digital Web tabs (which are quite attractive), the appearance isn't too far off (and we could get ours much closer to DW's tabs if we tried).

Some final thoughts

If you were to build the tab image with enough height and the right width, you could use the image for building some nice mountaintop cornered boxes on your site, effectively recycling your background images.

Taking it one step further, you could export different width boxes (for mountaintop cornered boxes) on the same image that you use in your navigation image, with little cost in file size as there are very few colors being used here.

An example

Here's a little example, scooped from the mountaintops article. Dan's original and something based on what is outlined above (narrowed for simplicity and please excuse my poor graphic skills at creating shadows...).

Big thanks to Philippe for keeping it honest in IE mac...

Check out the blog categories for older content

• 9 Rules
• Application Programming Interfaces
• Blogging
• Contingency Design
• CSS
• Fiftyfoureleven
• General
• Link Wrap
• Marketing
• News, Rants and Ephemera
• Programming and Scripts
• Search Engines
• Web Development
• Widgets that Work
• Working on the Web

The latest from my personal website,
Mike Papageorge.com