Add Delay To Menu Dropdown

Store Builder Questions
1

Hi,

Does anyone have any experience adding a delay to the main menu, so it does not instantly drop down when you hover over it?



I find it to be on the sensitive side and would like to tune it.



Thanks for reading

2

It is possible with transitions. Please check examples here

3

Thanks for the reply. I will try and implement this

4

Please inform us about the received result

5

Thank you. I have played with this a little in my spare time, but am not able to get it to work as desired. I was able to create a delay, but it caused the dropdown to appear behind my company logo, then after the specified delay it came to the front. I'm not very experienced at this type of coding, but I assume that it would require another line of code or two in order to work as desired.

6

Thanks ecomlabs for the hint on transitions. It led me to another stackoverflow thread that got it working for me.

http://stackoverflow.com/questions/3331353/transitions-on-the-display-property

What I ended up with for the top menu dropdown horizontal was adding this to styles.less

.ty-menu__submenu-items {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition-property: visibility, opacity;
    transition-delay: 0.5s;
}
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,
.is-hover-menu .ty-menu__submenu-items {
    visibility: visible;
    opacity: 1;
}

This gives a half second delay when showing or hiding the dropdown. If you just want the show delay and have it hide with no delay try this:

.ty-menu__submenu-items {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition-property: visibility, opacity;
    transition-delay: 0s;
}
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,
.is-hover-menu .ty-menu__submenu-items {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.5s;
}

7

Any idea what the classes structure would be for the admin side? I played with this a while ago and could never get it to work properly.

8

This works for the admin side except I can't get it to delay the hiding of the menu for some reason.

.hover-show {
    li.dropdown:hover > ul.dropdown-menu,
    li.dropdown-submenu:hover > ul.dropdown-menu {
        visibility: visible;
        opacity: 1;
        height: auto;
        transition-delay: 0.5s;
    }
}
.hover-show li.dropdown {
	ul.dropdown-menu {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    height: 0px;
    transition-property: visibility, opacity, height;
    transition-delay: 0s;
	}
}

Also, what I posted earlier for the customer side has problems when you go to smaller widths (e.g. phones) and the menu collapses. This fixes that by also transitioning the height:

.ty-menu__submenu-items {
    display: block;
    visibility: hidden;
    opacity: 0;
    height: 0px;
    transition-property: visibility, opacity, height;
    transition-delay: 0.35s;
}
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,
.is-hover-menu .ty-menu__submenu-items {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition-delay: 0.5s;
}

Note this only works for IE 10 & up. Seems to degrade well in IE 9 - works fine but no delay. Goes a lot further back in other browsers.

9

A little more clean-up on this. The height transition was causing the problem with the hide menu delay so I got rid of that and changed the css to only apply to screen widths above the max in responsive.less for the collapsed menu. Admin side isn't responsive so just removed the height transition there. I also removed transition-property as it really wasn't needed (defaults to all properties) and changed transition-delay to use the cs-cart mixin that expands it to all of the browser specific properties for maximum old non-IE browser compatibility.

Customer side, .5 seconds delay to show, .35 seconds delay to hide:

@media (min-width: 768px) {
    .ty-menu__submenu-items {
        display: block;
        visibility: hidden;
        opacity: 0;
        .transition-delay(0.35s);
    }
    .no-touch .ty-menu__item:hover .ty-menu__submenu-items,
    .is-hover-menu .ty-menu__submenu-items {
        visibility: visible;
        opacity: 1;
        .transition-delay(0.5s);
    }
}

Admin side, .5 seconds delay to show, .35 seconds delay to hide:

.hover-show li.dropdown:hover > ul.dropdown-menu,
.hover-show li.dropdown-submenu:hover > ul.dropdown-menu {
    visibility: visible;
    opacity: 1;
    .transition-delay(0.5s);
}
.hover-show li.dropdown {
  ul.dropdown-menu {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    .transition-delay(0.35s);
  }
}
10

One more thing for the admin side. To add a delay to the annoying tooltip popups add this to design/backend/templates/addons/my_changes/hooks/index/scripts.post.tpl for a .5 second delay to show and .35 second delay to hide:

{literal}

{/literal}
11

Thanks, will check these out next week.

12

I should always wait overnight before posting so my brain has a chance to process. cs-cart's lazy loading of the tooltip confused me a little bit. Here's a better way to add the delay to the tooltips that lazy loads the tooltip on first mouseover like cs-cart does.

{literal}

{/literal}

If you don't care about lazy loading it can be simplified to this:

{literal}

{/literal}
13

Ok, playing around with it some more the lazy loading causes some problems with the delay that leaves tooltips showing - cs-cart put the show in the wrong place making it execute once in their mouseover and once for the tooltip library. Moving it inside the if fixes that. Also a change to the non-lazy loading to remove cs-carts mouseover event for the tooltip that isn't needed when non-lazy loading.

Lazy load:

{literal}

{/literal}

non-lazy load:

{literal}

{/literal}