Left Tab!!

This Info-Bar has its visible tab on the far-left.

Middle Tab!!

This Info-Bar has its visible tab in the middle.

Right Tab!!

This Info-Bar has its visible tab on the far-right.

Pure CSS Info-Bar (Mutli-Tab Demo)

This page demonstrates the Pure CSS Info-Bar, except with multiple tabs.

To achieve this, all you do is add a small class (with one declaration) for each tab, setting its position. And a single declaration for all tabs, setting their z-index on a hover. That's it!

If you wanted, you could go to town, setting different text alignments and all-sorts. A pure CSS animated drop-down navigation system would be easy. You might also want to be more accurate with your positioning - I literally threw this together!

It would probably look much neater with evenenly-spaced tabs stacked from the left of the page, but I wanted to show you a wee trick for the (centre) tab positioning, so there you have it!

Okay, here is the CSS. The (small) extra section for multiple tabs is at the foot (notes contained within)..

highlighted source generated dynamically with corz distro machine..
back to the main page

Make Big Fun Now!