Hide-and-Show CSS Tabs - With Default Tabs & In-Flow Tabs Tutorial
This was hard - I won't lie! It took me forever to work out all the bugs! But what do I have to show for my efforts? Pure CSS Tabs - that's what! And by tabs I mean, a navigation structure that hides and shows different content all on the same page WITHOUT linking to another page, or the use of iframes, frames, javascript, or etc. If you've been looking, then no doubt for the most part all you've found is Javascript based tabs. The only other example of a pure CSS tabs system that I was able to find, was Stu Nicholls over at CSSplay.
I don't mean to brag (well maybe I do), but mine blows his out of the water! No arguing here, he's much smarter than I. But I'm a persistent, obsessive, perfectionist, and no one holds a candle to that! Both of his examples are done with 160 lines of confusing CSS, completely different rules for IE, and icky CC's in the HTML. Mine are done with 90 lines of logical CSS, and simple HTML! Anyway's, nothing wrong with a little healthy competition... 
While I was making these, I did a lot of experimentation, figured out what worked and what didn't, and made a few different variations of each. So I'll start with the ones with simplest and least amount of code, and work my way down to the most intricate, but, equally rewarding versions! In most of the examples below, I used li:hover instead a:hover to help create the hide-and-show effect. This allowed me to validly use anchors and block level elements in the content! However, in doing so, IE6 needs a little JS to play as well!.
Fixed Height Container!
As stated above, this version is as basic as it gets. It uses an anchor for the navigation links (so IE6 is JS free and happy), but in doing so, this limits you to no links in the content (can't embed links), and only inline elements (validly at least!).
Basically the same as above, but now it's showing the hover effect over the li instead of the anchor. This allowed me to validly use anchors and block level elements in the content!
For the most part, same code as above, but, this one makes the first link "appear" active on page load and/or when the mouse is outside the container. By appear I mean, the link is not really active, otherwise there would be no way of un-activating it (with CSS at least) when the other links are hovered over. The first link and it's content are a duplicate (i.e. #default/.default), and positioned absolutely on top of the original. Then I simply make it disappear when the others are hovered over. Pretty slick I must say! This one would probably have to be my favorite of the bunch!
Fluid Height Container!
Back to using the anchor for this one, so only BLA - BLA - BLA... But, now we're using position relative for the hide-and-show content instead of position absolute! That definitely makes things a little harder, but keeps everything "inflow". In other words, the drop down content affects the position of any content below it! Nice! However, because we're using position relative (instead of position absolute) IE6 gets all confused, and needs another tag (i.e. "i") to use as the navigation menu. Otherwise, IE6 can't position the drop down content correctly.
With the above comments in Example #4 in mind, I don't like making things more complicated for good browsers, all for the sake of one shitty browser. I'd rather just make it more complicated for the shitty browser! "If" you feel the same, then you can use this example intead. Here the hover effect is on the "li", and there is no need for an additional tag in the HTML. However, without the additional tag IE6 can't do position relative, she can only do position absolute on the drop down content. Well then how do you keep it "inflow" you ask? That's the cool part! There's some seperate CSS, but the real work horse is the javascript! It grows the "li" (which is position static) to the height of the absolute block. Thereby, keeping everything "inflow" - Walla!
Unfortunately, IE6 needs the extra tag in the HTML (i.e. "b") for the navigation menu to work in this version. I'm really proud of this one! This is the only example on the web - the first of it's kind! And for good reason - it was freeken hard! Making the first link, and it's content, show by default is relatively easy! But making it disappear when the other links are hovered over, and not take up any space, and stay inflow, well that's a whole new bad of tricks! Come-on, give it up, who's the man...?
