Easy CSS inverted tabs menu

I’ve used various tabs from Exploding-Boy on several occasions – they’re CSS-only, they look nice and have neat compact code. Kudos to Christopher Ware for putting these together.

For my new project, however, I need the tabs to drop down from the header div. After finding only the inverted sliding doors tabs from 456 Berea Street and not much else, I decided to try working with the Exploding-Boy tabs as a base.

So here in this example you can see the original tabs at the top and my inverted ones at the bottom. The CSS for both is in the example file – the only modifications I made were:

1. Changed the border on #tabs6a (my version) to the top rather than the bottom.

2. Changed the padding on #tabs6a ul so the tabs were moved up against the border in 1, above.

3. Took the two images (the left and right sides of the tabs) and flipped them vertically.

4. Changed the background position of #tabs6a a:hover from -42px to -15px.

5. Changed the background position of #tabs6a a:hover span from -42px to -15px.

Now it looks fine in IE7, FF, and Netscape.

One problem – Opera doesn’t seem to play well with image background-position; I’m using Opera 9.1 and I didn’t find anything specifically referring to this version, but I did for 7.5 and others. In any event, the background-position was a little off for Opera, so I had to have a workaround for that…

I don’t normally use hacks in my sites, but in this case I used the media queries hack for Opera – I would appreciate a better suggestion if anyone has one!

I’m happy with the way this is working now and hope this is of use to others too.

Leave a Reply

Your email address will not be published. Required fields are marked *