Add CSS Animations to Ubermenu

Support
#1

Hey!
I would like to use the CSS hover intent animations to my ubermenu, but unsure how to go about it. I would like to have the top level and sub menu items gradually change colour when hovering above. Any solutions?

#2

Hi there,

Thanks for posting in.

Are you referring to this feature http://sevenspark.com/docs/ubermenu-3/settings/menu/trigger ? Would you mind providing a sample?

If it’s just hover styling then maybe a simple CSS is enough. Just need to add transition, like this

.ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
	transition: all 1s;
}

And every color and styling of your menu will animate.

Thanks!

#3

Hey Rad!
That worked, but only for top level items, not the subemenu items etc. How can this be accommodated?

#4

Hi,

You can add this code as well.

.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:hover, 
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
    transition: all 1s;
}

Thanks

#5

great, works perfectly. Thanks!

#6

You’re welcome!