Simple CSS Hover Tab
Update: The original edit of this post and demo file didn’t work in IE6/7. See the comments for my quick explanation of the fix (the demo now works in FF2/3, Safari 2/3, Opera 9, and IE6/7).
After throwing together a quick little hover/tab widget for my previous article, I thought I’d share how it was made, in case you find a need for it someday.
Bulletproof lists
The widget in question is just a simple unordered list, with each list item containing an anchor and an image—we want the images in this case because I want them to display in my RSS feed and for anyone who can’t (or chooses not to) view the styled version of this site.
Note: Feel free to reference images in the stylesheet rather than inline if that suits your purposes.
See the widget in use in my previous article, or check out this demo.
The code
First, the markup (with URLs truncated to save trees):
Simple, uncluttered, uncomplicated.
Next, the CSS:
ul#hover-tab-thingy {
position:relative;
padding:0;
width:500px;
height:498px; }
#hover-tab-thingy li {
float:left;
list-style:none; }
#hover-tab-thingy li a {
float:left;
padding:9px 21px;
background-color:#eee;
color:#999;
font-size:9px;
text-align:center;
text-transform:uppercase;
border-right:1px solid #fff; }
#hover-tab-thingy li a:hover {
background-color:#f60;
color:#fff; }
li#one a,
li#one a:hover {
background-color:#e5e5e5;
color:#555; }
#hover-tab-thingy li a img {
position:absolute;
left:0;
top:30px;
width:500px;
height:460px;
clear:left;
margin-left:-9999px;
padding:1px;
border:3px solid #e5e5e5; }
li#one a img,
#hover-tab-thingy li a:hover img {
margin-left:0; }
li#two a:hover img,
li#three a:hover img {
border-color:#f60; }
This is all fairly straightforward, so here are the highlights that may help when duplicating this on your own:
- The entire idea is that you have tabs that are each associated with content (images in this case) which are made visible when the user hovers over the tab. There are more things you could do with this, but that’s your job, grasshopper.
- The tabs are floated; the content elements (
img
in this case) clear the floats. - The content elements are set to
position:absolute
, so they can appear in the same location for each tab. To accomplish this, theul
is set toposition:relative
(in short: an absolutely positioned element will be positioned relative to its nearest positioned ancestor—see Doug Bowman’s great write up for more), and it’s probably a good idea if the dimensions of yourul
(the container for your content) have a lot in common with those of your content elements. - IE6 has a problem reverting elements that set
display:block
on:hover
to their original state (e.g.display:none
). To counter this, use a negative left margin as the default positioning, and then setmargin-left:0;
on the hover state, which works in all modern browsers. - The
width
andheight
is specific to my example (the dimensions of the images I used), ditto for thepadding
on the tabs and thetop
positioning on theimg
elements (to push them below the tabs). Bend them to your will.
Wrap-up
This may be something that you’ll find use for on a regular basis—one of those tiny snippets of reusable “stuff” that you’ll be glad you don’t have to type every time.
This item was posted by Tuesday, August 19th, 2008.
onCategories:
You can follow comments on this item via the RSS 2.0 feed.
Comments are closed, but you can trackback from your own site.