Overlay menu items ease-out too long

[Zander]

On <1000px I hide the navigation and show the burger.

https://codepen.io/Brumonti/pen/GdWLGQ

But when I try to animate the menu items out again, when clicking the burger to close the menu, the items are still visible when they move back into place. Looks as stupid as I am.

I don't get what I could do to about it, except for an transition of 0s for the items. But thats not cool.

Any hints? Like please?

[Pogany]

You may add width:0;to the @media all and (max-width: 1000px).
Also ( and this is not a must) you may move some rules from the .is-open to the @media all and (max-width: 1000px).
I’ve made a fork: https://codepen.io/giaco/pen/ELmYbv?editors=0100
I hope this helps.

[Zander]

Yeah, that helped!

In the meantime I changed the easing to a cubic bezier curve, so that the fade-out of the items is faster. At least I think it is.

https://codepen.io/Brumonti/pen/GdWLGQ

[Author]

Posts