Have you wanted to do something a little different with your jQuery UI Tabs?
All of these examples only involve CSS changes (except for the single line of tabs) that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.
Default tabs appearance.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs without the list background.
#tabs-nobg {
padding: 0px;
}
#tabs-nobg .ui-tabs-nav {
background: transparent;
border-width: 0px 0px 1px 0px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
#tabs-nobg .ui-tabs-panel {
margin: 0em 0.2em 0.2em 0.2em;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs without the header background.
#tabs-nohdr {
padding: 0px;
background: none;
border-width: 0px;
}
#tabs-nohdr .ui-tabs-nav {
padding-left: 0px;
background: transparent;
border-width: 0px 0px 1px 0px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
#tabs-nohdr .ui-tabs-panel {
background: url(images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #f5f3e5;
border-width: 0px 1px 1px 1px;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Minimalist tabs.
#tabs-min {
background: transparent;
border: none;
}
#tabs-min .ui-widget-header {
background: transparent;
border: none;
border-bottom: 1px solid #c0c0c0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
#tabs-min .ui-state-default {
background: transparent;
border: none;
}
#tabs-min .ui-state-active {
background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
border: none;
}
#tabs-min .ui-state-default a {
color: #c0c0c0;
}
#tabs-min .ui-state-active a {
color: #459E00;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs with smaller non-selected tabs.
#tabs-smaller .ui-tabs-nav li {
margin-top: 0.6em;
font-size: 80%;
}
#tabs-smaller .ui-tabs-nav li.ui-tabs-selected {
margin-top: 0em;
font-size: 100%;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Centred tabs.
#tabs-centre .ui-tabs-nav {
height: 2.35em;
text-align: center;
}
#tabs-centre .ui-tabs-nav li {
display: inline-block;
float: none;
margin: 0em;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs with icons.
#tabs-icons .ui-tabs-nav .ui-icon {
display: inline-block;
}<div id="tabs-icons" class="tabs">
<ul>
<li><a href="#tabs-icons-1" name="tabs-icons">
<span class="ui-icon ui-icon-flag"></span> First</a>
</li>
...
</ul>
...
</div>Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs at the bottom.
#tabs-bottom {
position: relative;
padding-bottom: 3em;
}
#tabs-bottom .ui-tabs-nav {
position: absolute;
left: 0.25em;
right: 0.25em;
bottom: 0.25em;
padding: 0em 0.2em 0.2em;
}
#tabs-bottom .ui-tabs-nav li {
border-top: none;
border-bottom-width: 1px !important;
border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
}
#tabs-bottom .ui-tabs-nav li.ui-tabs-selected {
top: -1px;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs on the left.
#tabs-left {
position: relative;
padding-left: 6.5em;
}
#tabs-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left .ui-tabs-nav li {
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !important;
border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-left .ui-tabs-nav li.ui-tabs-selected {
border-right: 1px solid transparent;
}
#tabs-left .ui-tabs-nav li a {
float: right;
width: 100%;
text-align: right;
}
#tabs-left > div {
height: 35em;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs on the right.
#tabs-right {
position: relative;
padding-right: 6.5em;
}
#tabs-right .ui-tabs-nav {
position: absolute;
right: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0.2em 0.2em 0em;
}
#tabs-right .ui-tabs-nav li {
width: 100%;
border-left: none;
border-bottom-width: 1px !important;
border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
overflow: hidden;
}
#tabs-right .ui-tabs-nav li.ui-tabs-selected {
left: -1px;
border-left: 1px solid transparent;
}
#tabs-right .ui-tabs-nav li a {
width: 100%;
}
#tabs-right > div {
height: 33em;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nested tabs, horizontal then vertical.
#tabs-nested > .ui-tabs-panel {
padding: 0em;
}
#tabs-nested-left {
position: relative;
padding-left: 6.5em;
}
#tabs-nested-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-nested-left .ui-tabs-nav li {
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !important;
border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected {
border-right: 1px solid transparent;
}
#tabs-nested-left .ui-tabs-nav li a {
float: right;
width: 100%;
text-align: right;
}
#tabs-nested-left > div {
height: 10em;
overflow: auto;
}Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs on a single line.
#tabs-one-line .scroller {
overflow: auto;
}
#tabs-one-line ul {
width: 1660px;
}This implementation also requires the addition of a div wrapper around the tabs ul.
<div class="tabs">
<div class="scroller">
<ul>
...
</ul>
</div>
...
</div>Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
You can contact me via e-mail at kbwood{at}iinet.com.au.
© 2010-2011, Keith Wood