Suckerfish With jQuery

RSS Feed

Feb

XHTML & CSS, jQuery

A List Apart published a great article in November 2003 by Patrick Griffiths and Dan Webb. The article demonstrates the code and techniques involved in creating lightweight, accessible, standards-compliant Suckerfish Dropdown Menus. The procedue outlined in the published article applies the :hover pseudo class to <li> elements in order to display an unordered list (soon to become your submenu). Unlike all other browsers I am aware of, Internet Explorer only allows the :hover pseudo class to be applied to links. The solution… JavaScript:

startList = function() {
if (document.all&amp;&amp;document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i&lt;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;

I have found this snippet of code to cause flickering in Internet Explorer when utilizing the jQuery library on the same page. What better a solution than to write up some code using jQuery:

$(document).ready(function() {
  $('.about').hover(function() {
    $('.about ul').css("display","block");
  }, function() {
    $('.about ul').css("display","none");
  });
});

The submenu is now triggered when users hover over the the <li> element (with the class: ‘about’). Take A List Apart’s example code:

<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>

Applying the jQuery code given above, you can simply apply the specified class to the <li> element which the submenu we are dealing with:

  <li class="about">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>

<blockquote>quote</blockquote>

<em>some emphasized text</em>

To add code to your comments, simply wrap the code inside <pre> tags. Syntax highlighting will be added if you define the language. Example:
<pre lang="php">some code</pre>

Supported "lang" attribute values: html4strict, css, php, javascript, xml & mysql