<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; }