I’ve had this idea for a long time, to create a menu that would look animated but still being all CSS. The trick is to use the movement of the mouse over different objects to trigger other elements to change. Thanks to normal child selectors, nested elements and some padding animation is actually possible. The theory behind this is that the 1st element sets the size of the visible menu item, the 2nd changes this to a higher value, and so forth. You can also put in color changes and whatever else CSS you might want!
This is just a proof of concept, and I have no idea if it actually works in all browsers. I’ve developed this little example for Firefox 2. Mouse over the menu slowly and see what happens…
Confusing? I put in some borders in the example below, in an attempt to show off the theory behind it..
Hope you like it 