Reply To: Some transition effects for the secondary menu

[Ender]

You are completely right. It does not help to get bogged down in details.

Have now found a simple solution for me.

I modify this

    .secondary-navigation.toggled .main-nav > ul {
        max-height: 1000px;
        animation: fadeInDown 500ms ease-in-out both;
        transition: opacity 500ms ease-in-out;
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0;
    }
    }

and add this

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

That’s okay for me now. (Customizer make problems on the mobile view on Safari iMac – Menu cannot opened, but its ok)

A reversed version with FadeOutUp I wanted to try. But then I have the problem that I have an effect in the menu with every page call. (I could not found the opposite of .secondary-navigation.toggled) In order not to loose more time, I have omitted this now.

Now comes as next the animated hamburger animation.