I use tabs for navigation a lot. Not for in-page DOM swapping, but for expressing a list of available pages along with indicating which on you're on. Pretty much every tab "system" is centered around client-side manipulation, rather than just presenting server-generated markup. And the few counter examples don't do it in an encapsulated way, they use a body selector, tab-id-specific styling, or whatever. What I really wanted was to simply emit a UL with some LIs inside (one of them with class="active") and be done. No muss, no fuss.
After faking it with ad hoc CSS in a number of apps I decided it was time to actually make a concerted effort to build a reusable mechanism for doing this. So I did.
You can get the code as well as a demo and docs at http://www.barneyb.com/r/css_tabs.cfm. Included is a form for customizing the colors and sizing of the tabs (since some of the values are used in multiple directives), and the CSS is emitted at the bottom (as well as into the document itself for styling the demos).
Note that this is not designed to be the be-all and end-all CSS tab solution. It is designed to be a really lightweight and easy to use CSS tab solution. Emphasis on simplicity. Disemphasis on edge cases, backwards compatibility, and bells and whistles. Firefox 3+, IE8+, and Chome all do fine. I didn't test others. IE7 and less fail spectacularly (though the navigation remains totally usable). And mind your !DOCTYPE.
Finally, since I'm deliberately only styling the UL and LI, you can put whatever you want inside the LIs. I'm already using this layout on a number of apps and while most have simple As inside the LIs, some of them are using icons and/or icons and text.
I don't know if that's useful to anyone else, but since it's been so helpful for me, I figured I'd share.
Comments are closed.