Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlay menu items ease-out too long

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #270469
    Zander
    Participant

    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?

    #270472
    Pogany
    Participant

    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.

    #270473
    Zander
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.