Friday, April 10, 2009

MooTools Single Level Drop-down Menus

This uses a minimal amount of Javascript - one simple class. Overall this is pretty much straight from the Son of Suckerfish Dropdowns with the only notable change being the Javascript.


Just a simple unordered list for the top level menu items, and embedded lists for each sub-menu.


This is a simple Mootools class that extends custom events onto any <li> elements. Mouseenter and mouseleave are events custom to the Mootools API. The advantage of these is that they only fire when entering or leaving the parent node, and only fire once. I still use this since older versions of IE don't recognize the :hover pseudo-class for anything but <a>.

Style Template

This is just a bare minimum framework that gets the dislay toggling properly. This works well enough in all major browsers. IE can have some small issues when it comes to spacing the first level <ul> and the second level - even small pixel gaps will cause the menu to disappear.

Having .menu a {display: block;} allows links in every list to fill the whole space. When doing color :hover's, the entire line will be colored and clickable.

Creating the Menu

Mootools adds the domready event that can be called on page load. Here we search for any element of class menu and extend the functionality of the Menu class. We could further target this by changing to $$('').