A CSS Menu that fail my expectation

Recently I did a test to see if the CSS Menu at http://www.alistapart.com/articles/horizdropdowns/ can replace my currently JS Menu used for our website. After several tweaking and tuning, I finally got it works with the current website. However, it fails to convince me that I should replace the current JS menu with that. Even thought the setup for menu items is very neat (I like that), the event and effect of menu do not feel very friendly. I used transmenu for the current website since 3 years back and now it’s still very good. I think  I will stick with transmenu for a little bit longer.

Below is the detailed CSS & JS files I have got from that website (after several tweaks):

layout.html

<!-- ... -->
<!-- Begin of the main menu -->
<ul id="nav">
  <li><a href="#">Front page</a></li>
  <li class="subnav"><a href="/Admin">Administration</a>
    <ul>
      <li><a href="/User">Users Control Panel</a></li>
      <li><a href="/Role">Roles Control Panel</a></li>
      <li><a href="/Objects">Objects Control Panel</a></li>
      <li><a href="/Permission">Permissions Control Panel</a></li>
      <li><a href="/uiClrcache">Update Homepage</a></li>
    </ul>
  </li>
  <li class="subnav"><a href="#">Human Resource</a>
    <ul>
      <li><a href="/IDV">Internal Published Documents</a></li>
    </ul>
  </li>
  <li class="subnav"><a href="#">Sales &amp; Marketing</a>
    <ul>
      <li><a href="/SaleQuote2">Sales Quotation Database</a></li>
      <li><a href="/BusinessTarget">Business Target</a></li>
      <li><a href="/ShipMast">Shipping Master List</a></li>
    </ul>
  </li>
  <li class="subnav"><a href="#">Customer Service</a>
    <ul>
      <li><a href="/CsrQuote2">CSR Quotation</a></li>
    </ul>
  </li>
<!-- ... -->
</ul>

main_menu.css

/* Color theme */
#leftCol ul {
  border-bottom: 1px solid #ccc;
}

#leftCol ul li {
  background: #eee;
}

#leftCol ul li.subnav {
  background:#eee url(/ul2/images/nav/submenu.gif) no-repeat scroll 100% 5px;
}

#leftCol ul li a {
  color: #111;
  /*background: #fee; /* IE6 Bug */
  border: 1px solid #ccc;
}

#leftCol ul li a:hover {
  color: #E2144A;
  font-weight: bolder;
  /*background-color: #fee; /* */
} /* Hover Styles */

/* End of color theme */

#leftCol {
  font-size:0.9em; /* 11.7px */
}

#leftCol ul li {
  position: relative;
  margin-left: 0px;
}

/* Styles for Menu Items */
#leftCol ul li a {
  display: block;
  width: 96.5%; /**/
  /*background-color: #faa; /**/
  text-decoration: none;
  padding: 3px;
  border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html #leftCol ul li { float: left; height: 1%; }
* html #leftCol ul li a { height: 1%; }
/* End */

#leftCol ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 138px; /* Width of Menu Items */
}

/* first sub level */
#leftCol li ul {
  position: absolute;
  left: 140px;
  top: 0;
  display: none;
  width: 190px;
}

/* second sub level */
#leftCol li ul li ul {
  left: 190px;
  width: 210px;
}

#leftCol li ul li ul li ul, /* third sub level */
#leftCol li ul li ul li ul li ul /* fourth sub level */
{
  left: 210px;
  width: 210px;
}

/* The magic for first level */
#leftCol li:hover ul,
#leftCol li.over ul { display: block; }

/* The magic for second level */
#leftCol li:hover ul li ul,
#leftCol li.over ul li ul { display: none; }
#leftCol li:hover ul li:hover ul,
#leftCol li.over ul li.over ul { display: block; }

/* The magic for third level */
#leftCol li:hover ul li:hover ul li ul,
#leftCol li.over ul li.over ul li ul { display: none; }
#leftCol li:hover ul li:hover ul li:hover ul,
#leftCol li.over ul li.over ul li.over ul { display: block; }

/* The magic for fourth level */
#leftCol li:hover ul li:hover ul li:hover ul li ul,
#leftCol li.over ul li.over ul li.over ul li ul { display: none; }
#leftCol li:hover ul li:hover ul li:hover ul li:hover ul,
#leftCol li.over ul li.over ul li.over ul li.over ul { display: block; }

main_menu.js

function attach_hover(navRoot, level)
{
  for (var i=0; i<navRoot.childNodes.length; i++)
  {
    var node = navRoot.childNodes[i];
    if (node.nodeName=="LI")
    {
      node.onmouseover=function() {
        this.className+=" over";
      };
      node.onmouseout=function() {
        this.className=this.className.replace(" over", "");
      };

      for (var j=0; j<node.childNodes.length; j++)
      {
        if (node.childNodes[j].nodeName=="UL")
        {
          attach_hover(node.childNodes[j], level+1);
        }
      }
    }
  }
}

startList = function() {
  if (document.all&&document.getElementById)
  {
    navRoot = document.getElementById("nav");
    if (navRoot && (navRoot.nodeName=="UL"))
    {
      attach_hover(navRoot, 1);
    }
  }
};

window.onload=startList;

Advertisement