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:
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.
- Previous post: On separate but equal design
- Next post: Quick guide to UTF-8
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
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.
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
Kato: Yes, it is valid. No unit is necessary when the value is 0. Zero is zero, no matter what the unit is.
Very nice. Only, if you change the text-size (e.g. 120% in Mozilla) the gfx doesn't show correct.
So long,
Tobias
Tobias: I know. I can live with that visual glitch though. It's not a huge problem IMO.
Thats great mate i'll have to nick this (sorry borrow) soon :-)
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?
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!
Sorry, comments are closed for this post.