MovableBlog: CSS Tabs

Nuance 2.0

March 24, 2003

Mark Pilgrim shows off his pure CSS tabs, and much of today at work was spent trying to figure out how he did it. It would have probably been better if I waited for his own explanation/demonstration, but I had no idea he'd do it today.

I didn't incorporate the hacks (yet?), and still need to test what I have in Netscape 4 and Opera. But here is what it looks like in Mozilla 1.3.

This is a screenshot of the Home tab, with no mouseover:

Home tab, no mouseover

This is a screenshot of the Home tab, while on the home page, but with a mouseover on the Home tab (I could have disabled the link to the 'current' page, but decided against it):

Home tab, mouseover the Home tab while on the Home page

And here is a shot of the mouse over the About tab while on the Home page:

Home tab, mousever the About tab

It's a really great tip, and saves from having to code and debug Javascript (coding and debugging that I already did for a previous incarnation of my work's mockup, oy).

Posted by Richard at 9:03

Comments

The kicker is that I had half-written up an explanation of how I made the code that resulted in the above screenshots. Guess there's no need for that anymore.

Posted by: Richard | March 24, 2003 09:56 PM