Dan Rubin’s SuperfluousBanter

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):

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>

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:

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 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…