Hi all. Since I posted a 3 level deep pure css menu I’ve been playing with it around. I thought it would be cool to add some animation on it, since CSS3 with it’s “transitions” is able to do so. It took around 1 hour to create a new version of pure css menu, with little bit of animations.

I want to inform you in advance that this menu is not ideal. Depended on its content it should be changed to work properly. So if you decided to use it on your site, I would recommend you to test how it works with your particular content. Let’s say that it is Alpha 0.1 version of pure css animated 3 level deep menu.

Let’s check it out, here is how it looks and works:

So, as we can see, now our menu has animated effect when second and third level appear. You can check out the code here:

HTML

CSS

As I told before this menu is not as flexible as its non-animated analog, however, as for me, it is pretty fun that CSS allows developers to create animations without using JS at all.

You can download this menu here.

Thank you for your time and come back for new posts!