Inverted Sliding Doors Tabs

A few days ago I promised to write about something that isn’t about different ways of styling boxes with CSS. To keep that promise (well, almost – dropshadows are used in this demo), I’ve written an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se (my colleague Tobias Nilsson did the design). By inverted tabs I mean that they are bottom-aligned, and as text size is increased, more and more of the tabs will be revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.

Here’s a screenshot of the tabs:

Inverted Sliding Doors Tabs

The tabs being inverted, or upside down, and the dropshadow cast by the header image prevented me from using the original technique without modifying it.

The changes are explained on the Inverted Sliding Doors Tabs demo page.

Posted on June 28, 2004 in CSS

Comments

  1. July 7, 2004 by H. Wiedow

    It’s a very nice solution. I have allready used sliding doors for a inhouse project and it works fantastic. At the moment I’m surfing the web for new ideas for my new private project. I think I will impliment the nice inverted sliding doors. Thank you for your side.

  2. July 20, 2004 by J. Foster

    Very well done. I really like the inverted tab solution. I am going to try and get the :hover to work though. Will let you know what I come up with! Thanks.

  3. July 29, 2004 by Kato Jenkina

    Nice Jorb!

    I noticed in your CSS, you have measurements without units. i.e. margin: 0; padding: 0;

    without a unit of measurement like margin: 0px;

    will it still validate without the px?

    Kato

  4. July 29, 2004 by Roger (Author comment)

    Kato: Yes, it is valid. No unit is necessary when the value is 0. Zero is zero, no matter what the unit is.

  5. August 5, 2004 by Tobias

    Very nice. Only, if you change the text-size (e.g. 120% in Mozilla) the gfx doesn’t show correct.

    So long,

    Tobias

  6. August 5, 2004 by Roger (Author comment)

    Tobias: I know. I can live with that visual glitch though. It’s not a huge problem IMO.

  7. August 16, 2004 by Leith

    Thats great mate i’ll have to nick this (sorry borrow) soon :-)

  8. September 16, 2004 by johnny boy

    how would it be possible to adapt this to work with a dynamic menu? like in a CMS…it looks like this menu need to be ‘static’ because you need to define the menu item ‘names’ in th ecss as well… any thoughts?

  9. December 6, 2004 by Scott

    I implemented this using Movable Type 2.6 as my CMS. In order to get the tabs to display correctly for each of my category pages, I simply replaced the <body id=staticcategoryname> with Movable Type’s MTArchiveCategory dynamic tag in the Category Archive template. I left the Main template alone (using Home for the body id). I haven’t completed the graphics, but you can view the source on passtheveggies.com. Note that is looks much better in Firefox- I have some strange behavior with the fifth tab in IE 6.

    Berea, thanks again for the great adaptation and sample page!

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.