[Resolved] Some transition effects for the secondary menu

[Ender]

Hello, I am the proud user of this wonderful theme since yesterday and I am very happy.

Now my questions for the secondary menu.

I would like to add some simple transition effects in the second menu.

1. When the mobile menu button is pressed, the window should first appear slowly below. At the same time, the individual menu items should slowly scroll / slide down.

2. Is there a possibility that the content is not pushed down below. A kind of overlay maybe?

3. Is there a possibility that if the user continues to scroll the opened menu is automatically closed again.

Many thanks.

Update1: For the effects 1. and 2. similar like here (must be not the same): http://jsfiddle.net/RxguB/98/

GeneratePress 2.2.2

[Tom]

Hi there,

Give this a shot for #1 and #2:

@media (max-width: 768px) {
    .secondary-navigation .main-nav>ul {
        position: absolute;
        left: 0;
        right: 0;
        top: 45px;
        z-index: 100;
        background: #fff;
        transition: opacity 500ms ease-in-out;
        opacity: 0;
        display: block;
        pointer-events: none;
        transition-delay: 0;
    }

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

    .secondary-navigation {
        position: relative;
    }

    .secondary-navigation .main-nav > ul > li {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .secondary-navigation li {
        float: none;
        width: 100%;
        text-align: left;
    }

    .secondary-navigation.toggled .main-nav > ul > li:nth-child(1) {
        opacity: 1;
        transition-delay: 1s;
    }

    .secondary-navigation.toggled .main-nav > ul > li:nth-child(2) {
        opacity: 1;
        transition-delay: 1.2s;
    }

    .secondary-navigation.toggled .main-nav > ul > li:nth-child(3) {
        opacity: 1;
        transition-delay: 1.4s;
    }

    .secondary-navigation.toggled .main-nav > ul > li:nth-child(4) {
        opacity: 1;
        transition-delay: 1.6s;
    }
}

Closing it on scroll would likely require some custom javascript, unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ender]

Works wonderfully. Great! Thank u very much.

But I have an additional request:

4.
When the individual sub-points are opened, how can I implement an effect like “FadeInDown”? Similar to here:

https://codepen.io/kmyers/pen/PwRjyV

or

https://www.tutorialspoint.com/css/css_animation_fade_in_down.htm

5.
But then there is the last request:

If the menu button is pressed again and then the window closes again. How could the individual opened sub-points disappear with an opposite effect (ie: FadeInUp)?

I know that there is a WordPress plugin for https://daneden.github.io/animate.css/.

I could imagine that with this plugin these ideas can be realized. However, i want to install as few plugins as possible and be as independent as possible.

I thank you for your efforts.

[Ender]

and unfortunately I had to realize: if the code is activated, the second menu disappeared on the desktop version.

[Tom]

Unfortunately, the CSS begins to get super complex (more so than it already is) when you get that deep into transitions. When it comes to offering custom CSS help here in the forum, we try to keep a reasonable limit on the amount of time we spend coding. In this case, it would take me far to long I’m afraid.

As for the desktop issue, I just adjusted the code above to fix that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

Glad you found a solution! Thanks for sharing it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts