Skip to content

Instantly share code, notes, and snippets.

@jonesmac
Created March 2, 2013 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonesmac/5072889 to your computer and use it in GitHub Desktop.
Save jonesmac/5072889 to your computer and use it in GitHub Desktop.
Basic CSS for tabs through Jquerytools
/* root element for tabs */
ul.tabs {
list-style:none;
border-bottom:1px solid #666;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
padding:0;
margin:0 !important;
list-style-image:none !important;
}
/* link inside the tab. uses a background image */
ul.tabs a {
display:block;
height: 30px;
width: 134px;
text-align:center;
text-decoration:none;
padding:0px;
margin:0px;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
cursor:default !important;
}
/* initially all panes are hidden */
.panes .pane {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment