[Resolved] Animating sub menu drop downs

[Nick]

Hi,
How would I go about animating the li’s within the .sub-menu ul, so that when clicked, their children slide out instead of appearing instantly?
Thanks in advance for any help.

[Leo]

Hi there,

Any chance you can provide an example of what you would like to achieve?

[Nick]

A bit like this, except that the same animations and functionality are happening within the top nav submenu, and the opening and closing is to be operated by the on click event instead of on hover: https://www.jqueryscript.net/demo/Animated-Multi-level-Dropdown-Side-Menu-with-jQuery-Tendina-Plugin/#

As you can see, this example also closes the other open li when a new one is opened, so that there is only ever one open at a time. If you have any ideas on how to implement that functionality, that would be great as well.

Thanks

[Tom]

You could try something like this:

.main-navigation .sub-menu {
    max-height: 0;
    transition: max-height 600ms ease-in-out;
}

.main-navigation .sub-menu.toggled-on {
    max-height: 500px;
}

Let me know 🙂

[Nick]

Hi,
Thank you, yes this worked, with the exception of adding the following overflow setting to stop scrollbars appearing (they were appearing whether there was overflow or not), and raising the max height to stop any overflow:

.main-navigation .sub-menu {
    max-height: 0;
    transition: max-height 300ms ease-in-out;
    overflow-y: hidden;
}

.main-navigation .sub-menu.toggled-on {
    max-height: 800px;
}

Much appreciated!

[Tom]

Awesome, glad I could help! 🙂

[Fricis]

Hi,

How to get it work for slide-out(mobile) menu?

Thanks!

[Tom]

This should help: https://generatepress.com/forums/topic/ease-in-transition-for-mobile-hamburger-dropdown-menu/#post-402092

[Viktor]

Hi, I know this is an old thread but my question is the same – how to animate the drop-downs on the off-canvas mobile menu.
The linked solution above doesn’t seem to work with the latest GP (Premium) version.

[David]

Hi there,

that ‘should’ still work – if you want to raise a new topic where you can share a link to your site, i can take a look.

[Author]

Posts