Make texts (and cells) hyperlink-active using CSS

This brief article by Frank Manno from the Developer Shed describes a pretty, elegant way to create strings that act as hyperlink – where not just the string but its entire cell is hyper-active. It seems like a simple example that I can use for the JHeadstart Workshop (see :live example)

Q: Hi Frank;
I have started using CSS and rollover events to change the background colour of a cell when the mouse is positioned over it. I find this method better than using two graphics for each button as it reduces the download time for my sites. The problem with this is that only the text inside the cell is a hyperlink, not the cell itself. I would like the whole cell to mimic a button where you can click on any part of it instead of just the text. Is there an easy solution for this? — Andre

A: Hi Andre,
Welcome to the wonderful world of CSS. (Don’t I sound just like a documentary?) The quickest way to design a navigation bar that allows for hovering over the entire area of a link (not just the text) can be accomplished with a few simple rules. Here’s an example:

HTML

<ul id="nav">
<li><a href="#">Mango</a></li>
<li><a href="#">Cherries</a></li>
<li><a href="#">Strawberries</a></li>
<li><a href="#">Peaches</a></li>
<li><a href="#">Kiwi</a></li>
</ul>

CSS:
nav{
margin: 0;
padding: 0;
list-style-type: none;
background-color: #94A0AB;
width: auto;
}

#nav li{
padding: 0;
margin: 0;
display: inline;
background-color: #94A0AB;
}

#nav li a{
float: left;
font-family: georgia, Arial, Helvetica, sans-serif;
color: #000;
border-bottom: 3px solid #94A0AB;
background-color: #94A0AB;
text-decoration: none;
padding: 3px 5px;
}

#nav li a:hover{
border-bottom: 3px solid #000;
background-color: #C7CFD7;
}

#nav li#mango a:hover{ background-color: #FFD700; }
#nav li#cherry a:hover{ background-color: #F90000; }
#nav li#sb a:hover{ background-color: #FF5757; }
#nav li#peach a:hover{ background-color: #FFD17B; }
#nav li#kiwi a:hover{ background-color: #00BD02; }

The code will produce a horizontal navigation bar that will allow you to click anywhere within the link’s “box”. You can check out my live example for a quick demo (as well as code). Another example from Frank also demonstates effective use of CSS

Perhaps the following article on YADM is also (or even more) interesting: YADM-Yet Another Dynamic Menu Christian Heilmann; YADM is an accessible DHTML dropdown/flyout/explorer solution with complete separation of CSS and JavaScript. YADM was developed to help you create navigations that make sense, not to create whizz-bang navigations that are there for the sake of being flashy. Dropdown navigations still seem to be cool and are part of almost every screen design these days. The fact that they cause a lot of accessibility and usability issues seems not to transpire, and clients keep asking for them. The amount of badly written, obstrusive, and bloated scripts is staggering. There are some very good ones though (Son of suckerfish, aqTree2, Gazingus), so why another one? See Examples of YADM for an online demo.

Also see Eric Meyer’s Website for some CSS suggestions and links.