Call (877) SITE-OPT (748-3678)

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.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In