[Support request] menu hover animations

Home Forums Support menu hover animations

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #887179
    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.

    #888056
    Tom
    Lead Developer
    Lead Developer

    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?

    #888058
    sg

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

    #888343
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #1162765
    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.

    #1163152
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.