Expanding Rounded Menu Animation – Codrops

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

From our sponsor: Sign up for Mailchimp today.

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!

Source link

Show More


Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

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

Back to top button