refurbiz

<h3 class="byline">    by  <a href="http://www.alistapart.com/authors/g/patrickgriffiths"> Patrick Griffiths</a>,   <a href="http://www.alistapart.com/authors/w/danwebb">Dan Webb</a>     </h3><div id="articletext">    “DHTML” dropdown menus have notoriously involved nasty big chunks  of JavaScript with numerous browser-specific hacks that render any  otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a  lightweight, accessible, standards-compliant, cross-browser-compatible  method! Enter Suckerfish Dropdowns.<br />
<h2>Meet the markup</h2>To start, we should use the best method for defining a navigation  menu — a list. For this example, we will work on a simple HTML unordered  list. {Line wraps are marked <span class="linewrap">»</span>.  –<em>Ed.</em>}<br />
<pre><ul>
  <li>Sunfishes
    <ul>
      <li><a href="">Blackbanded<span class="linewrap">»</span>
        sunfish</a></li>
      <li><a href="">Shadow bass</a></li>
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
  </ul>
 </li>

<li>Grunts
    <ul>
      <li><a href="">Smallmouth grunt
        </a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>
  </li>

<li>Remoras
    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul></pre>Quite straightforward really — nice and neat HTML that, as a result,  is highly accessible. But now we want to transform this into a dynamic  list — the first level of list items will make up a horizontal menu bar  from which the second level lists will drop down.<br />
<h2>Styling it</h2>To get started, all of the lists need to be jigged around a bit —  namely, the padding and margin set to zero and the list-style set to  none:<br />
<pre>ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }</pre>Now we need to transform the first-level list into a horizontal menu  bar. There are a number of methods to do this, discussed in detail <a href="http://www.alistapart.com/articles/taminglists/">elsewhere</a>. We could display the list-items inline (<code>display: inline</code>), but for this example, we are going to float them to the left.<br />
<pre>li {
  float: left;
  position: relative;
  width: 10em;
  }</pre>The position has been set to <code>relative</code> because we want  the position of the second-level, nested lists to be relative to the  first-level list items and the width has been set to space it out a bit.  The dropdown menu is coming together.<br />
The next step is to tackle the second-level lists that will be the dropdowns themselves:<br />
<pre>li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }</pre><div id="resettop">This positions the second-level lists absolutely  (pulling them out of the flow of HTML into a world all of their own) and  sets their initial state to not be displayed. If you substitute <code>display: none</code> with <code>display: block</code>,  you will see the need for the top and left properties in Internet  Explorer, because without them, IE will align the second-level lists to  the top right of their relative parent rather than the bottom left.  Unfortunately, this IE fix will mess things up in browsers like Opera,  so add the following CSS to reset the top and left properties on all but  IE browsers:</div><pre>li > ul {
 top: auto;
 left: auto;
 }</pre>And now, making the sucker work. To make a second-level list appear  when its parent list item is “rolled over,” we simply need to add the  following:<br />
<pre>li:hover ul { display: block; }</pre>Which says that any list that is nested in a list item that has the cursor hovering over it should be displayed.<br />
Finally, because the lists are floated left, the content underneath it needs to be set free of the floating by applying <code>clear: left</code> to it.<br />
<h2>Hold on a minute!</h2>“This dropdown malarkey doesn't work!” I hear 102.6% (or the latest  percentage being thrown about) of you cry.  I am, as some might have  guessed, talking about Internet Explorer users. The more you use and  develop with browsers such as Mozilla the more you realize how pathetic  Internet Explorer can be when it comes to web standards. The <code>:hover</code>  pseudo class should work with any element, but in Internet Explorer it  only works with links. So. What’s the use in a dropdown menu when it  only works on -2.6% of browsers? Not much, to be honest. We need to  apply a little bit more magic.<br />
<h2>DOM-based scripting to the rescue</h2>We’ve established IE’s lack of support for the <code>:hover</code>  pseudo class, but by using the Document Object Model, we can attach  mouseover and mouseout events to any element. This is good news for us  because it means that with a simple snippet of JavaScript we can  effectively patch IE’s <code>:hover</code> problems.<br />
Because IE is blind we need to find another way to identify the properties of the <code>:hover</code>  pseudo class. With JavaScript, we know that we can manipulate the  className property of an element so what we are going to do first is  alter the CSS:<br />
<pre>li:hover ul{ display: block; }</pre>becomes:<br />
<pre>li:hover ul, li.over ul{ display: block; }</pre>Now we can invoke the <code>:hover</code> CSS rules by adding the class <code>over</code>  to the desired element. We also need a way to tell IE which of the UL  elements on the page we actually want to be our dropdown menus. We can  do this by giving an <code>id</code> to our root <code>ul</code> element:<br />
<pre><ul></pre>becomes:<br />
<pre><ul id="nav"></pre>Now that we have a means of identifying the root <code>ul</code>  element of our dropdown list, we can grab this element and loop through  all of its child elements, attaching mouseover and mouseout events to  all the <code>li</code> elements nested within it. And this is how it’s done:<br />
<pre>startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;</pre>On page load, the <code>startList</code> function is invoked.  The function determines if the browser is actually IE 5 or greater by checking for the existence of the <code>document.all</code> object and <code>document.getElementById</code>  function.  This is a bit of a crude way of doing it but it’s short and  sweet — and since we are trying to make a compact solution, this will  do. It then loops through, enabling mouseover and mouseout events which  add and remove the <code>over</code> class from the <code>className</code> property of the element.<br />
There you have it. If you got lost anywhere, have a look at a commented, <a href="http://www.htmldog.com/articles/suckerfish/bones/">bare-bones example</a>  in action.<br />
<h3>Gills, fins, scales...</h3>So far things are a little bare. The idea has been to show the basic  workings of the Suckerfish Dropdown, but CSS can make things look <a href="http://www.htmldog.com/articles/suckerfish/example/">a lot prettier</a>. An obvious starting point would be to apply a background color to the second-level lists.<br />
After resetting the top and left properties as described <a href="http://www.alistapart.com/articles/dropdowns/#resettop">earlier</a>, dropdowns in the <a href="http://www.htmldog.com/articles/suckerfish/example/">pretty</a>  example appear directly below menu labels in most modern browsers, but  unfortunately not in all. In Safari 1.0, they still drop down from the  top left edge of the screen. {Check the <a href="http://www.alistapart.com/discuss/dropdowns/">discussion forum</a> for workarounds. –<em>Ed.</em>}<br />
<h3>Further usability and accessibility</h3>Making links out of the first-level list items will allow  tab-stopping for readers who don’t use pointing devices. Pointing those  links to higher-level pages than the links in the dropdowns would be  even better.<br />
</div>

Suckerfish Dropdowns

by Patrick Griffiths , Dan Webb “DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numer...