Hide-and-Show CSS Tabs - With Default Tabs & In-Flow Tabs Tutorial
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.
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...?
Need help adding this or other code to your website? Post it here in the forum!