Nederdev : webdesign & stuff

Most designers will already know the famous Son of Suckerfish menus. Suckerfish is a full proof solution for creating drop-down menus that work in all major browsers. It uses a tiny piece of Javascript to mimic the :hover pseudo-class for IE and everything else you need is just some CSS for your menu's good looks.

In the case Suckerfish is the only bit of Javascript used at your website it's best to stick with the original code, but if you're already using jQuery like Drupal does, the codebase can be decreased to a maximum of nine lines which are even easier to customise than the original! Here's the magic:

1. $(document).ready(function () {});.
   Here we attach an eventhandler to the page that will be executed as soon as the page is ready to be manipulated.
2. var li = $('#var li');
   jQuery selects elements by using on CSS selectors. #nav li will get all <li> elements inside elements with id="nav" and puts them in a variable.
3. li.mouseover(function () {
  $(this).addClass('hover');
});
   
   Now we attach an eventhandler to the <li> elements that will be executed as soon as the cursor moves over the element. At this point the eventhandler will add the 'hover' class to the element.
4. li.mouseout(function () {
  $(this).removeClass('hover');
});
   
   This piece of code works nearly the same as the last one. Here we remove the class from the element as soon as the cursor moves away from the element.

The advantages of this approach are that the code base is smaller than the original and you can easily apply this to another or multiple menus by simply modifying the selector. If you are in the mood for customising this code you might want to take a look at the jQuery documentation about selectors and events. Good luck!