Simple Tabbed Menu Using Sliding Doors (Downloadable)

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

I’ve touched on the “sliding doors” theory here a little bit before, but never with a full-blown example. If this is the first you are hearing of it, sliding doors is a technique which allows you to expand graphics “from the middle” as you expand the content of a web element. Expanding graphics isn’t the hard part, you can always just make a bigger background image than you need and expose more of it as the content grows. The “from the middle” is the hard part.

What the heck do you mean, expanding from the middle?

I mean that you need the graphic to have consistent corners, yet still be able to grow. One of the most common uses for this is the very popular tabbed navigation. You need a rounded corner on the upper left, and you need a rounded corner on the upper right. You cannot accomplish this with a single graphic and have it be expandable, it’s just not possible.

The trick is two use two overlapping images.

That is pretty much the whole trick. You need two elements to make it happen. For example in a menu, you have the list item element, and the anchor element. The anchor is on top, so it gets the “left side” image. The list item is underneath, so it gets the “right side” image. The underneath image gets to be the extra-large which does the job of expanding.

Check out these screen captures. The first image shows the menu at “normal” size, and the second image show how the menu expands gracefully as the text size is increased on the page.