Nederdev : web and Drupal stuff

Veel designers zullen de bekende Son of Suckerfish menu's wel kennen. Suckerfish is een beproefde oplossing om drop-downmenu's te maken die in alle browsers werken. Het bestaat uit een klein stukje Javascript om de :hover pseudo-class te imiteren voor IE en voor de rest heb je alleen nog CSS nodig voor de daadwerkelijke weergave van je menu.

Mocht Suckerfish het enige stukje Javascript op je site zijn, dan kan je gewoon de originele code gebruiken, maar als je ook jQuery gebruikt, zoals Drupal doet, dan kan die code verkleind worden tot negen regels of minder en het is nog eens gemakkelijker aan te passen ook! Hier komt de truuk:

1. $(document).ready(function () {});.
   Hier wordt een eventhandler aan de webpagina toegevoegd die uitgevoerd wordt zodra de pagina gemanipuleerd kan worden.
2. var li = $('#var li');
   jQuery selecteert elementen uit de pagina op basis van CSS selectors. #nav li haalt dus alle <li>-elementen die binnen een element met id="nav" vallen uit de pagina en stopt ze in een variabele.
3. li.mouseover(function () {
  $(this).addClass('hover');
});
   
   Nu kennen we een eventhandler toe aan de <li>-elementen die uitgevoerd wordt als de cursor boven het element komt. De eventhandler geeft het element vervolgens de class 'hover'.
4. li.mouseout(function () {
  $(this).removeClass('hover');
});
   
   Deze stap werkt bijna hetzelfde als de vorige. Hier halen we de class uit de vorige stap weer weg, zodra de cursor boven het element weg is.

Het voordeel aan deze code is dat hij kleiner is dan de originele code van Suckerfish én je kan heel gemakkelijk andere of meerdere menu's instellen door de selector aan te passen. Mocht je nog wat aan deze code willen sleutelen, dan zal de jQuery documentatie over selectors en events enorm handig zijn. Succes!