+201223538180

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionExpanding Rounded Menu Animation – Codrops

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionExpanding Rounded Menu Animation – Codrops

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution

An increasing menu animation with a canopy unreveal impact within the background.


From our sponsor: What if Your Mission Administration Software Was Quick and Intuitive? Strive Shortcut.

Menu animations are one thing that may elevate a design to a different degree. There are limitless potentialities and so they present a possibility to do one thing distinctive. Generally it’s additionally attention-grabbing to pair them with different animations. Already some time again I noticed this very nice menu animation by Ruslan Siiz known as “365 Journal”:

It’s a very lovely design and animation so I attempted replicating it however with extra of a darkish theme. That darkish theme is impressed by one other design which I can’t recall (it’s in all probability from a yr in the past or so), particularly the massive letters.

That is the preliminary web page:

When clicking on one of many hyperlinks within the high menu, two issues occur. First, we’ve a background cowl animation which works with an “unreveal” impact. In this tutorial you may find out how this impact works and the right way to code it up. Second, we’ve the increasing menu animation within the foreground. That is the how the menu appears like when it’s expanded:

The entire animation appears as follows:

The rounded look of the menu is preserved by inserting the submenu in a means that it overlaps the highest menu. Utilizing a component that wraps the submenu with the background coloration and border radius, and that has the overflow set to “hidden”, permits us to cover the internal menu factor by setting its Y rework to -100%.

I actually hope you get pleasure from this demo and discover it inspiring! Let me know what you assume through @codrops or @crnacura!

15 Superior Instruments and Assets for Designers and Companies in 2022
Inspirational Web sites Roundup #35

Supply hyperlink

Leave a Reply