Figure 7-8. CableOrganizer.com CSS menus

Chapter 7 - CSS Optimization

CableOrganizer reduced its HTML file by 46.4% (from 97 KB to 52 KB) by recoding its page using CSS techniques. Here is the original JavaScript-powered XHTML markup for its main menu on the left:

<div id="categories" class="left-nav">
    <ul>
        <li><a href="http://cableorganizer.com/surface-raceways/" title="Wire Raceway,
        Wire Duct, Conduit" id="menu1Link" onmouseover="ypSlideOutMenu.showMenu('menu1');"
        onmouseout="ypSlideOutMenu.hideMenu('menu1')">Raceway, Duct & Conduit </a> </li>
        <li><a href="http://cableorganizer.com/cord-covers/" title="Electrical Cord
        Cover" id="menu2Link" onmouseover="ypSlideOutMenu.showMenu('menu2');"
        onmouseout="ypSlideOutMenu.hideMenu('menu2')">Cord Covers</a> </li>

The JavaScript file (menus.js) is 6.12 KB. The entire menus.js file was eliminated using CSS :hover to re-create the drop-down behavior. Here is the HTML markup for the same menu using CSS for behavior:

<div id="cat">
    <ul>
        <li><a href="/surface-raceways/"><span>Raceway, Duct, Conduit</span></a>
        <div class="sub">
            <ul>
                <li><a href="/surface-raceways/">Raceways: HOME</a></li>
                <li><a href="/cable-raceway/">Cable Raceway</a></li>
            ...</ul></div></li>
        <li><a href="/cord-covers/">Cord Covers</a><div class="sub"><ul><li>...

In the CSS, CableOrganizer set the left-column categories to float left with a width of 153 pixels:

#mainwrap table tr td#lcol #cat,#cat{float:left;position:relative;overflow:
    visible;top:0;left:0;width:153px;margin:0;padding:0;}

CableOrganizer positioned the submenus with a left margin of 155 px to offset the menus to the right (note that relative measurements would scale better):

#cat ul div.sub{position:absolute;top:-3px;margin:0 0 0 155px;padding:0;clear:
both;width:105%;height:505%;}

Next, CableOrganizer hid the submenus by setting the visibility to none:

#cat ul li div.sub,#cat ul ul,#cat li:hover ul{display:none;}

Then it is just a matter of setting the visibility of the submenus on :hover like so:

body #cat #mainwrap li a:hover div.sub,body #cat li:hover div.sub,body #cat li:hover
ul,body #cat li:hover li:hover ul{display:block;}

This disjointed rollover is accomplished by including the .sub (menu) div within the li. So, the li a:hover div.sub{display:block;} (and display:none) turns the submenu on and off.