[Support request] menu hover animations

[sg]

Hi, im trying to use the hover menu transition from this site : http://preview.byaviators.com/theme/realsite/

i have this but its not working :

.main-nav ul li.menu-item-has-children .sub-menu li a:hover:before { width: 100%; }

.main-nav ul li.menu-item-has-children .sub-menu li a::before {
background-color: #F5F5F5;
content: ”;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width .15s linear;
width: 0;
z-index: -1;
}

is there anything i am missing to export ?

Thanks.

[Tom]

Hi there,

It looks like they’re using javascript to achieve that. They also have a <div> inside their list items, which is strange.

Are you wanting that exact look, or do you just want the sub-menu to come in from the side like that?

[sg]

Hi Tom, i just need the hover animation as long if it doesn’t cause any performance issue .

[Tom]

I’m not the best at CSS transitions, unfortunately.

You could try something like this:

.main-navigation ul ul {
    left: 0;
    visibility: visible;
    width: 0;
    transition: width 300ms ease, opacity 300ms ease;
}

.main-navigation .main-nav ul ul li a {
    opacity: 0;
    transition: opacity 300ms ease;
    transition-delay: 200ms;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul, 
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover > ul {
    transition: width 300ms ease, opacity 300ms ease;
    width: 200px;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul a, 
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover > ul a {
    opacity: 1;
}

.dropdown-hover .main-navigation:not(.toggled) ul li.mega-menu:hover > ul, 
.dropdown-hover .main-navigation:not(.toggled) ul li.mega-menu.sfHover > ul {
    transition: width 300ms ease, opacity 300ms ease;
    width: 100%;
}

[John]

Tom I can’t get enough of these random little code snippets you have throughout your support site on how to do subtle animations on menu hover or drop downs. I know you guys are all super busy, but you should have your team throw together some collection of animation effect code snippets for css to make the drop down and other effects for the menu. Maybe even build in a drop down of like 5-8 choices! That would be sooooo cool!

On my way to donate again now! Thank you so much for all you do and keep up the great work!
I encourage all that are feeling as blessed as I am to donate to Tom and his awesome team. They deserve SO much more than what we pay for a license.

[Tom]

Thank you so much for the donation, John! Your message was a great way to start my day, I really appreciate it! 🙂

[Author]

Posts