cREATE AN EASE ANIMATION FOR MY SUBMENU

[PhilippHannappel]

Dear all Lay-themers,

first of all, I really like this theme and think that it offers some great opportunities for websites. Thanks at this point.

Now to my issue: I customized my desktop primary menu via CSS. Now it gets close to the intended look. What bothers me, is that the sub-menu just pops up on click. I would like to have an ease in animation, so it fades. I already discovered that the sub-menu on click is triggered by an event. But I don't know how to implement the wished result. Here I need your help.

Thank you very much in advance.

The website can be found here: http://neu.philipphannappel.de/ - Don't mind the subdomain, I am redesigning my current website. You find a sub-menu under the "Info" menu-item.

[arminunruh]

.sub-menu{
opacity: 0!important;
transform: translateY(20px)!important;
transition: all 300ms ease!important;
}
.menu-item-has-children.show-submenu-desktop > .sub-menu{
transform: translateY(0px)!important;
opacity: 1!important;
}

does that work?

thanks!

[PhilippHannappel]

Hello Armin,

thank you very much for your quick response. Unfortunately no. Your code does not work. It still just pops up.

[arminunruh]

nav.laynav ul.sub-menu{
pointer-events:none!important;
display:block!important;
opacity: 0!important;
transform: translateY(20px)!important;
transition: all 300ms ease!important;
}
.menu-item-has-children.show-submenu-desktop > .sub-menu{
pointer-events:auto!important;
transform: translateY(0px)!important;
opacity: 1!important;
}

does that work?

[PhilippHannappel]

Hej @arminunruh,

yeah, this does its job. Thank you a lot.

edit 2024/01/28:

But: It just works if the ul.sub-menu is defined with display: block. Now I have the issue, that I get large transparent gaps in my menu list, where the sub-menus pop up if clicked. I already tried a little bit, but did not find a solution yet. Is it possible to define nav.laynav ul.sub-menu with display: block only when the click-event is triggered?

Best.

[arminunruh]

nav.laynav ul.sub-menu{
pointer-events:none!important;
display:flex!important;
opacity: 0!important;
transform: translateY(20px)!important;
transition: all 300ms ease!important;
}
.menu-item-has-children.show-submenu-desktop > .sub-menu{
pointer-events:auto!important;
transform: translateY(0px)!important;
opacity: 1!important;
}

maybe this?

[PhilippHannappel]

Hej there,

you just changed the display to flex, if I read this correctly. Unfortunately this does not work.

[arminunruh]

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?