<ul class="tabs"> is the starting point, with unadorned
<li> inside. You can add "left",
"center", or "right" class to the
<ul class="tabs"> to change the alignment (default is document
direction based), as well as add some space on the margin. You can also add a
"merge-up" class to combine a tab list with one immediately preceeding it.
A .small variant is also provided for, with sizes reduced by
15%. Just add the class to your UL, and you're set.
If you're merging multiple sets with different alignment, you'll need to add the class
to all the merged sets.
The <li>s accept an "active" class to the
to make an active/foreground/selected tab. You can also use a "new-group"
class to start a new group of tags (i.e., add an space before the tab).
The contents of the <li>s is arbitrary. The demos below
are links because that's the typical case, but it can be anything you want,
including multi-line tabs, images, etc.
Only browsers with "good" CSS rendering are supported. That includes at least
Firefox 3+, IE8+, and Chrome 4.1+. In particular, display: inline-block
is required, which seems to be the primary differentiator.
This is the CSS currently rendered into a STYLE block in the HEAD of this document.
/*
* CSS Tabs
*/
/* colors */
ul.tabs { border-bottom-color: #999; }
ul.tabs li { background-color: #ddd; border-color: #999; }
ul.tabs li.active { background-color: #fff; }
ul.tabs li:hover { background-color: #eee; }
ul.tabs li.active:hover { background-color: #fff; }
/* layout */
ul.tabs { border-bottom-width: 1px; font-size: 14px; line-height: 16px; }
ul.tabs.merge-up { margin-top: -24px; }
ul.tabs li { margin: 0 2px -1px; padding: 3px 6px; border-width: 1px; }
ul.tabs.left { padding: 0 0 0 6px; }
ul.tabs.right { padding: 0 6px 0 0; }
/* everything else */
ul.tabs { list-style: none; margin: 0; padding: 0; border-bottom-style: solid; }
ul.tabs.left { text-align: left; }
ul.tabs.right { text-align: right; }
ul.tabs.center { text-align: center; }
ul.tabs li { list-style: none; display: inline-block; border-style: solid; }
ul.tabs li.new-group { margin-left: 15px; }
ul.tabs li.active { border-bottom-color: transparent; }
/* small layout */
ul.tabs.small { font-size: 11.9px; line-height: 14px; }
ul.tabs.small.merge-up { margin-top: -21.1px; }
ul.tabs.small li { padding: 2.55px 5.1px; }
ul.tabs.small.left { padding-left: 5.1px; }
ul.tabs.small.right { padding-right: 5.1px; }