Pure CSS animated menu

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 🙂


  1. Try this: nest 30 divs, name them like id=frame01 etc. ,display: none (except the first one) , position them on top of eachother (absolute works best), css: #frame01:hover #frame02 display:block.
    repeat: #frame02 > #frame03 etc. Here's the mojo: alternate position left: 0 to -.01px and back,
    works only in firefox I'm afraid, maybe in the future? With this, noscript doesn't matter 🙂
    I'll send a mad example to ya! Used correctly this can steal some animation from javascript..
    And you can always add :active to let the user bypass the animation?

Leave a comment

Your email address will not be published. Required fields are marked *