Sliding Doors


I think simple, clear site navigation is important. I've always liked tabbed navigation. But these days it seems folks want to use a lot of fancy javascript and images only to produce navigation tabs that are full of eye candy, but also not very flexible. This is where "sliding doors" comes in.

Drupal is all about being customizeable. I wanted tab navigation that was both generated based on values I set from with Drupal but also somewhat nice looking.

My goto CSS guy decided to play hardball with me and made me figure out how to do it myself. I fussed for a day and a half trying to figure it out. As of today, it's still not quite finished (doesn't look right in IE), but I accomplished the basic goal and now just need to do a little tweaking.

I wanted text based tabs that also used nice looking images. The images could not be fixed width because there was no knowing ahead of time how wide the terms might be that make up the navigation. While CSS makes it easy to give a particular element a background image, it's not quite as simple to create a two sided background in a varying width context.

This morning on IRC, someone pointed me to an article on "sliding doors". I'd never heard of the term before, but sure enough, it was precisely the solution to my problem. And it's not all that difficult to implement, even for a CSS noob like myself.

Check out the article that gave me the solution: Sliding Doors of CSS.