Get the source at Github
A few years ago a lot of websites used an animated flash menu for their navigation. The smarter ones were build progressive above the html list. This is a canvas implementation of the same principle.

Source and example

Watch the demo

Thinking about the menu I had several strategies.

• Create a canvas for each menu item
• Create one canvas which contains the menu items and one moving canvas for the hover animation

I chose for the latter one because i had the feeling that the performance would be better with large menu’s. Of course more creative menu’s can be be created with separate canvas elements for each menu item.

The script consist of three parts.

• Reading out the html and building the menu and creating the animation canvas.
• Event handling.
• Tracking the mouse position for button clicks and hover states.

This way it is possible again to create irritating accessible menu’s 😉 . Luckily most clients nowadays avoids animating menu. But trends are known to die end come back again. I still need to find a proper way to position canvas elements and offsetting the origin for mouse calculations.