Figure 7-1. How not to do a menu

Chapter 7 - CSS Optimization

JavaScript is commonly used for rollovers and drop-down menus. However, in many cases you can substitute CSS :hover effects for JavaScript rollovers. Here is a real-world example that uses graphics rollovers for a left navigation bar (see Figure 7-1) that also uses graphical text (complete with underlines):

<img src="images/nav/nonav_top.gif"><br>
<a href="/tourism/" onMouseOver="act('tourism')" onMouseOut="inact('tourism')">
<img src="images/nav/tourism_off.gif" alt="Tourism" name="tourism" border="0"></a>
<br>
<a href="/trade/" target="_blank" onMouseOver="act('trade')" onMouseOut="inact('trade')">
<img src="images/nav/trade_off.gif" alt="Trade" name="trade" border="0"></a><br>
graphic menu example

Figure 7-1. How not to do a menu

With all CSS conversion projects, first strip the HTML markup down to a bare structure:

<ul>
<li><a href="/tourism/">Travel & Tourism</a></li>
<li><a href="/trade/">Trade</a></li>
...
</ul>

Then target your unordered list items with the following descendant selectors:

<style type="text/css">
    ul {list-style:none;}
    ul li a:hover{text-decoration:underline;}
</style>

Now you've substituted CSS behavior (:hover) for JavaScript behavior, greatly simplifying the code.