[Resolved] How to add animation to submenu

[Manuel]

Hi Tom, hi Leo,

how can i add animations to the submenu? So, it shouldn’t just slide down when you hover it should use this animation:

animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

Best regards

[Tom]

I supposed you could use this:

.main-navigation ul ul {
    animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

Not sure if it will work, but that’s the correct element to target.

[Manuel]

Thanksfor the fast answer.
That’s what I’ve already tried before but it doesn’t work.
Any other idea how I can get it working?

[Tom]

Is there an example out there you can point me to?

[Manuel]

Sorry, no example just an idea. Maybe I’ll find one soon.

[Tom]

It would definitely help – I’m not overly familiar with keyframes, so it’s hard to know why it wouldn’t be working without seeing an example.

[Manuel]

Hey Tom, I appreciate your help very much. No Theme or Plugin has a better support then GP. Thanks a lot.
Here’s the solution

.dropdown-hover .main-navigation ul li:hover > ul {
	        animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) none;
}

Here you can see an example on a testsite:
Testsite

[Tom]

Very cool! Thanks for posting the solution 🙂

[Author]

Posts