Archived topic
How to add animation to submenu
7 replies · Started by Manuel on January 21, 2018
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
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.
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?
Is there an example out there you can point me to?
Sorry, no example just an idea. Maybe I'll find one soon.
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.
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
Very cool! Thanks for posting the solution :)
