slayeroffice | code | fancy menu

The above is an unordered list of anchor tags. Mousing over one of the anchor tags will cause a hidden black div to expand vertically, turning the text color white. Mousing out will cause the black div to fade out, and the text in the anchor tag will re-appear one letter at a time from the 2nd letter on.

This is based on a Flash menu found at Well Vetted.

You can add as many LI's to the UL as you like, change the size of the text and alter the dimensions without modifying the script. The source is fairly well commented, but feel free to drop me a line with any questions or suggestions.

[This currently does not work correctly in Safari. I've left it as is in the event that someone who has more energy than I should like to have a look and suggest a fix.]

Javascript Source
CSS