Bowman’s Super Double-Hover List Menu Extended (to Triple-Hover)

I first saw a menu on www.fastcompany.com, and later learned that Doug Bowman had created this. It was a menu of faces, and what seemed to be a separate menu of names, and no matter which one you highlighted, a hover state appeared on both the name and the face, giving the user visual feedback on their selection. The magic was that it was all done with css, no javascript, and an unordered list.

I don’t know what Bowman called the menu – so I call it “Bowman’s super double-hover list menu”, and the html mark-up went something like this:

<div id="menu">
<ul>
	<li id="one"><a href="#"><em>item one</em></a></li>
	<li id="two"><a href="#"><em>item two</em></a></li>
	<li id="thr"><a href="#"><em>item threer</em></a></li>
	<li id="fou"><a href="#"><em>item four</em></a></li>
	...
</ul>
</div>

It was the inclusion of the <em> tag that made the magic possible.

I thought I would like to add to it. Let’s say instead of just a list of names and faces, what if there was a third element? Perhaps if I just added one more tag, like <strong>, I could include this third ‘list’ (not really a separate list, but the effect seems like it). I did, and it worked. Take a look at the example page to see what I’m talking about.

The html is below. Note the addition of <strong> tags.

<div id="menu">
<ul>
	<li id="aro"><a href="#"><em><strong>Alex Rodriguez</strong></em></a></li>
	<li id="vwe"><a href="#"><em><strong>Vernon Wells</strong></em></a></li>
	<li id="dje"><a href="#"><em><strong>Derek Jeter</strong></em></a></li>
	<li id="vgu"><a href="#"><em><strong>Vlad Guerrero</strong></em></a></li>
	<li id="kro"><a href="#"><em><strong>Kenny Rogers</strong></em></a></li>
	<li id="iro"><a href="#"><em><strong>Ivan Rodriguez</strong></em></a></li>
	<li id="mlo"><a href="#"><em><strong>Mark Loretta</strong></em></a></li>
	<li id="isu"><a href="#"><em><strong>Ichiro Suzuki</strong></em></a></li>
	<li id="dor"><a href="#"><em><strong>David Ortiz</strong></em></a></li>
</ul>
</div>

First I had to create on and off states for all the images:

Then it’s up to the CSS to only show half of the image at any given time. For instance, the images that contain the name are 200×70, and are set to show up in the <em> tag, with the top 35px being an ‘off’ state, and bottom 35px being on the ‘on’ state. We only want to show 35px at a time, not the whole image, so the height of this part is set to 35px.

#menu li a em {
	position:absolute;
	top:0;
	left:460px;
	display:block;
	padding:0;
	background:url("images/name_aro.gif") no-repeat 0 0;
	font: normal 1px/1px Arial,sans-serif;
	text-indent:-5000px;
	height: 35px;
	width: 200px;
	color:#ddd;
	white-space: nowrap;
}

Then for the :hover state, the other half of the image is shown by changing the background-position:

#menu li a:hover em {
    cursor:pointer;
    background-position:0 -35px;
}

Download the zipped example above and feel free to pick apart the css. If you have any questions – feel free to put them in the comments, or write askthecssguy@gmail.com.