Recreating a Flash menu using javascript (scriptaculous)
I was recently asked by a coworker if it's possible to create the left hand menu on the following page w/o using Flash.
My first impression and response was, "Oh hell yeah, you can definitely create that using javascript!"
Libraries such as Script.aculo.us, Yahoo UI and Moo.fx immediately came to mind. A few simple event handlers for mouseover and mouseout and simple animations would do the trick. well, nothing's ever simple.
I was able to get most of the funcationality of the Flash version of the menu, except for the part where the menu collapses when you move your mouse out of the menu region. For some reason, the onmouseout that I had attached to my DIV was being fired when the mouse pointer would go over a link within the DIV. I tried for many hours to avoid this, but finally gave up and put a "close" link on the bottom right corner of the menu to close it. I'm sure someone out there can fix this. I thought about using the mouse coordinates to detect whether the mouse pointer was outside the menu, but I really didn't feel like it
Anyway, here is the final example.
And here is the source zipped up (includes scriptaculous 1.6.2)