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 original 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 certain browsers :) 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).

Ok, so the name won’t win any awards, but let’s be honest: neither will this mini-tutorial, or the idea itself (nothing groundbreaking here, move along…). But after throwing together a quick little (you guessed it) hover/tab/thingy for my previous article, I thought I was fun enough to share, in case you find a need for it someday.

The usual suspects

The “thingy” 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. Because I know you need permission, don’t you…

If you were too lazy to click the link to my previous article above (and who could blame you, really), here’s a quick demo page.

Moving right along…

First, the markup (with URLs truncated to save trees):


Simple, uncluttered, uncomplicated. 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:

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:

  1. 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.
  2. The tabs are floated; the content elements (img in this case) clear the floats.
  3. The content elements are set to position:absolute, so they can appear in the same location for each tab. To accomplish this, the ul is set to position: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 your ul (the container for your content) have a lot in common with those of your content elements.
  4. 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 set margin-left:0; on the hover state, which works in all modern browsers.
  5. The width and height is specific to my example (the dimensions of the images I used), ditto for the padding on the tabs and the top positioning on the img elements (to push them below the tabs). Bend them to your will.
  6. Everyone dies at the end of The Departed. Seriously, everyone. That should be the subtitle of the movie.

Obligatory 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. Or you’ll never need it because you can’t for the life of you think of any reason why you’d need to reveal some content whilst hovering over a tab (I’m pretty much just painting the sarcasm with a roller at this point…).

Whatever your future may hold, now you have something you might not have had before, and that’s never a bad thing—unless we’re talking about some sort of disease, 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 without warnings of a spoiler.

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

    @Dan: I can’t believe I haven’t customized the colors of the code sample formatting plugin 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, everyone dies except Marky Mark.

    Now THAT’S a spoiler.

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

    @Lea: :)

    @Bridget: Oooo, raising the bar…

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

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

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

    Broken in IE7

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

    @Nick: I threw this together quickly, and didn’t feel like launching VMWare at the time, so thanks for the note – then again, none of us are really surprised at anything not working in IE6 anymore, are we? ;)

    @lk: Thanks so much for your insightful 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 percentages out in the cold :)

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

    I’ve updated the post and demo with corrected CSS, so everything now works in IE6/7.

    The problem 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 positioning in the IE duo, but then a strange thing happened: IE6 wasn’t reverting the img elements to their default invisible state of display:none, so once you hovered over a tab, its image stayed put (meaning if you hovered over all the tabs, the 3rd and top-most image would stay visible permanently). While this is obviously a bug in IE6, I didn’t think it warranted either an IE6 stylesheet or an inline hack, so I found another way. That way was using a negative left margin as the default positioning, and then just setting the margin to zero on hover.

    The new method works in your standard compliment 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 comment… was just in a hurry I guess.

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

    @lk: no worries, I just have to poke a little fun at those kinds of comments every so often ;)

    The main point is that *I* was in a hurry when I coded it up, so thanks for pointing out that it needed fixing. It’s much more useful 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 interoperability. I use a Mac, I code in Coda (flame away if you will) and use MAMP for testing. I recently completed 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 customers (roots) uses IE6 still. WTF uses IE6 still!? Jesus. Anyways. Long story short, I found a program called IETester that you can download from Softpedia, to do ie5.5 ie6, ie7 and ie8 beta testing all in one. It’s decent but only on windows of course; so fire up VMware or Parallels and test away!

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

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