Expanding Rounded Menu Animation

An expanding menu animation with a cover unreveal effect in the background.

Menu animations are something that can elevate a design to another level. There are endless possibilities and they provide an opportunity to do something unique. Sometimes it’s also interesting to pair them with other animations. Already a while back I saw this really nice menu animation by Ruslan Siiz called “365 Magazine”:

It’s a really beautiful design and animation so I tried replicating it but with more of a dark theme. That dark theme is inspired by another design which I can’t recall (it’s probably from a year ago or so), especially the big letters.

This is the initial page:

When clicking on one of the links in the top menu, two things happen. First, we have a background cover animation which works with an “unreveal” effect. In this tutorial you can learn how this effect works and how to code it up. Second, we have the expanding menu animation in the foreground. This is the how the menu looks like when it’s expanded:

The whole animation looks as follows:

The rounded appearance of the menu is preserved by placing the submenu in a way that it overlaps the top menu. Using an element that wraps the submenu with the background color and border radius, and that has the overflow set to “hidden”, allows us to hide the inner menu element by setting its Y transform to -100%.

I really hope you enjoy this demo and find it inspiring! Let me know what you think via @codrops or @crnacura!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!