About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

Simple CSS Hover Tab Thingy

Update: The orig­i­nal edit of this post and demo file didn’t quite work in IE6/7 (ok, didn’t work at all, really). That’s what you get when you rush and/or don’t care about cer­tain browsers :) See the com­ments for my quick expla­na­tion of the fix (the demo now works in FF2/3, Safari 2/3, Opera 9, and IE6/7).

Ok, so the name won’t win any awards, but let’s be hon­est: nei­ther will this mini-tutorial, or the idea itself (noth­ing ground­break­ing here, move along…). But after throw­ing together a quick lit­tle (you guessed it) hover/tab/thingy for my pre­vi­ous arti­cle, I thought I was fun enough to share, in case you find a need for it someday.

The usual suspects

The “thingy” in ques­tion is just a sim­ple unordered list, with each list item con­tain­ing an anchor and an image—we want the images in this case because I want them to dis­play in my RSS feed and for any­one who can’t (or chooses not to) view the styled ver­sion of this site.

Note: Feel free to ref­er­ence images in the stylesheet rather than inline if that suits your pur­poses. Because I know you need per­mis­sion, don’t you…

If you were too lazy to click the link to my pre­vi­ous arti­cle above (and who could blame you, really), here’s a quick demo page.

Mov­ing right along…

First, the markup (with URLs trun­cated to save trees):

1
2
3
4
5
<ul id="hover-tab-thingy">
  <li id="one"><a href="...">One <img ... /></a></li>
  <li id="two"><a href="...">Two <img ... /></a></li>
  <li id="three"><a href="...">Three <img ... /></a></li>
</ul>

Sim­ple, unclut­tered, uncom­pli­cated. Just how I know you like it.

Next, the CSS—not quite as short as the markup, but that’s how the story often goes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 straight­for­ward, so here are the high­lights that may help when dupli­cat­ing this on your own:

  1. The entire idea is that you have tabs that are each asso­ci­ated with con­tent (images in this case) which are made vis­i­ble when the user hov­ers over the tab. There are more things you could do with this, but that’s your job, grasshopper.
  2. The tabs are floated; the con­tent ele­ments (img in this case) clear the floats.
  3. The con­tent ele­ments are set to position:absolute, so they can appear in the same loca­tion for each tab. To accom­plish this, the ul is set to position:relative (in short: an absolutely posi­tioned ele­ment will be posi­tioned rel­a­tive to its near­est posi­tioned ancestor—see Doug Bowman’s great write up for more), and it’s prob­a­bly a good idea if the dimen­sions of your ul (the con­tainer for your con­tent) have a lot in com­mon with those of your con­tent elements.
  4. IE6 has a prob­lem revert­ing ele­ments that set display:block on :hover to their orig­i­nal state (e.g. display:none). To counter this, use a neg­a­tive left mar­gin as the default posi­tion­ing, and then set margin-left:0; on the hover state, which works in all mod­ern browsers.
  5. The width and height is spe­cific to my exam­ple (the dimen­sions of the images I used), ditto for the padding on the tabs and the top posi­tion­ing on the img ele­ments (to push them below the tabs). Bend them to your will.
  6. Every­one dies at the end of The Departed. Seri­ously, every­one. That should be the sub­ti­tle of the movie.

Oblig­a­tory wrap-up

This may be some­thing that you’ll find use for on a reg­u­lar basis—one of those tiny snip­pets of reusable “stuff” that you’ll be glad you don’t have to type every time. Or you’ll never need it because you can’t for the life of you think of any rea­son why you’d need to reveal some con­tent whilst hov­er­ing over a tab (I’m pretty much just paint­ing the sar­casm with a roller at this point…).

What­ever your future may hold, now you have some­thing you might not have had before, and that’s never a bad thing—unless we’re talk­ing about some sort of dis­ease, in which case…

This item was posted by Dan Rubin on Tuesday, August 19th, 2008.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed, but you can trackback from your own site.

15 comments on “Simple CSS Hover Tab Thingy”

  1. Posted by Dan Mall on Tuesday, August 19th, 2008.

    I can’t believe you would ruin The Departed like that with­out warn­ings of a spoiler.

  2. Posted by Dan Rubin on Tuesday, August 19th, 2008.

    @Dan: I can’t believe I haven’t cus­tomized the col­ors of the code sam­ple for­mat­ting plu­gin I just installed. You can’t tell me a spoiler is worse than that pink…

  3. Posted by Lea on Tuesday, August 19th, 2008.

    The title “The Departed” pretty much said it all.

  4. Posted by Bridget Stewart on Tuesday, August 19th, 2008.

    You mean, every­one dies except Marky Mark.

    Now THAT’S a spoiler.

  5. Posted by Dan Rubin on Tuesday, August 19th, 2008.

    @Lea: :)

    @Bridget: Oooo, rais­ing the bar…

  6. Posted by Nick on Wednesday, August 20th, 2008.

    Nice! Floated anchors do not align cor­rectly in IE6. I did not test IE7, but it looks fine in FF3 so I fig­ure its bound to be close. None the less good job

  7. Posted by lk on Wednesday, August 20th, 2008.

    Bro­ken in IE7

  8. Posted by Dan Rubin on Wednesday, August 20th, 2008.

    @Nick: I threw this together quickly, and didn’t feel like launch­ing VMWare at the time, so thanks for the note — then again, none of us are really sur­prised at any­thing not work­ing in IE6 any­more, are we? ;)

    @lk: Thanks so much for your insight­ful comment.

    I’ll fire up XP and take a look at what needs to be tweaked for at least IE7, and maybe IE6 while I’m at it. Wouldn’t want to leave the high per­cent­ages out in the cold :)

  9. Posted by Dan Rubin on Thursday, August 21st, 2008.

    I’ve updated the post and demo with cor­rected CSS, so every­thing now works in IE6/7.

    The prob­lem was two-fold: I had neglected to set the list items to float:left;, which IE6/7 both require in order to get the tabs to line up.

    That fixed the posi­tion­ing in the IE duo, but then a strange thing hap­pened: IE6 wasn’t revert­ing the img ele­ments to their default invis­i­ble state of display:none, so once you hov­ered over a tab, its image stayed put (mean­ing if you hov­ered over all the tabs, the 3rd and top-most image would stay vis­i­ble per­ma­nently). While this is obvi­ously a bug in IE6, I didn’t think it war­ranted either an IE6 stylesheet or an inline hack, so I found another way. That way was using a neg­a­tive left mar­gin as the default posi­tion­ing, and then just set­ting the mar­gin to zero on hover.

    The new method works in your stan­dard com­pli­ment of browsers (see the update at the very top of the post), so go forth and be fruitful.

  10. Posted by lk on Thursday, August 21st, 2008.

    Good job. Didn’t mean to be rude with my terse com­ment… was just in a hurry I guess.

  11. Posted by Dan Rubin on Friday, August 22nd, 2008.

    @lk: no wor­ries, I just have to poke a lit­tle fun at those kinds of com­ments every so often ;)

    The main point is that *I* was in a hurry when I coded it up, so thanks for point­ing out that it needed fix­ing. It’s much more use­ful now that it works in the IEs :)

  12. Posted by Chad on Tuesday, March 3rd, 2009.

    This brings about a good point that I am always bitched at about by my clients. IE6 inter­op­er­abil­ity. I use a Mac, I code in Coda (flame away if you will) and use MAMP for test­ing. I recently com­pleted a design for a site and had tested it in Safari, FF2 & 3 IE7 and Opera (even thought it’s only about 2%) and the client screamed at me because one of their biggest cus­tomers (roots) uses IE6 still. WTF uses IE6 still!? Jesus. Any­ways. Long story short, I found a pro­gram called IETester that you can down­load from Soft­pe­dia, to do ie5.5 ie6, ie7 and ie8 beta test­ing all in one. It’s decent but only on win­dows of course; so fire up VMware or Par­al­lels and test away!

  13. Posted by Kids Wall Art on Saturday, March 7th, 2009.

    Nice “thingy,” and @chad I’ve been look­ing for a tool that tests in all of the IEs. Thanks!