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

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

|

Simple CSS Hover Tab

Update: The orig­i­nal edit of this post and demo file did­n’t work in IE6/7. 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).

After throw­ing togeth­er a quick lit­tle hover/tab wid­get for my pre­vi­ous arti­cle, I thought I’d share how it was made, in case you find a need for it someday.

Bulletproof lists

The wid­get 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 choos­es 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 purposes.

See the wid­get in use in my pre­vi­ous arti­cle, or check out this demo.

The code

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


Sim­ple, unclut­tered, 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 fair­ly 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­at­ed 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 float­ed; 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 absolute­ly posi­tioned ele­ment will be posi­tioned rel­a­tive to its near­est posi­tioned ancestor—see Doug Bow­man’s great write up for more), and it’s prob­a­bly a good idea if the dimen­sions of your ul (the con­tain­er 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 hov­er state, which works in all mod­ern browsers.
  5. The width and height is spe­cif­ic to my exam­ple (the dimen­sions of the images I used), dit­to 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.

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.

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”

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

    I can’t believe you would ruin The Depart­ed 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­g­in I just installed. You can’t tell me a spoil­er is worse than that pink…

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

    The title “The Depart­ed” pret­ty 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! Float­ed anchors do not align cor­rect­ly 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 togeth­er quick­ly, and did­n’t feel like launch­ing VMWare at the time, so thanks for the note — then again, none of us are real­ly 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. Would­n’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 updat­ed the post and demo with cor­rect­ed CSS, so every­thing now works in IE6/7.

    The prob­lem was two-fold: I had neglect­ed 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 was­n’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­nent­ly). While this is obvi­ous­ly a bug in IE6, I did­n’t think it war­rant­ed either an IE6 stylesheet or an inline hack, so I found anoth­er 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. Did­n’t mean to be rude with my terse com­ment… was just in a hur­ry 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 hur­ry when I cod­ed it up, so thanks for point­ing out that it need­ed 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­i­ty. I use a Mac, I code in Coda (flame away if you will) and use MAMP for test­ing. I recent­ly com­plet­ed a design for a site and had test­ed 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 sto­ry 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!