How to add a hover delay on a menu for a Volusion site?

Question

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com

So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:

I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.

Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.

I do have access to the main html, css and js files.

I will be glad to provide more information if needed.

Please help. Thanks!

UPDATE:

First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.

Just added this code into my CSS file and it worked perfectly:

.vnav__subnav, .overlay{
    transition: opacity 0.2s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}

li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
    transition-delay: .5s;
}

Again, thanks Adam for the prompt response.

Possible duplicate. Already answered here [Delay jquery hover event?](http://stackoverflow.com/questions/435732/delay-jquery-hover-event) — Canilho, Feb 20 '17 at 21:36
I needed an answer with no plug-ins, if possible. Thanks though. — Fernando, Feb 20 '17 at 21:53

Adam K. · Accepted Answer · 2017-02-20T22:07:03.520

1

Try something like this

(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)

<style>
  a{
    color:black;
    transition:color 0s;
    transition-delay:0;
  }
  a:hover{
    color:red;
    transition-delay:0.5s;
  }
</style>

Well i wanted to show you generic usage.

You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)

<style>
.vnav__subnav, .overlay{
    transition: opacity .5s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
}
</style>

This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

edited Feb 20 '17 at 22:07

answered Feb 20 '17 at 21:36

Adam K.

888
6
18

The delay I need is for the dropdown, not for a color change. Did you mean that I can use this piece of code but just change it to fit a dropdown delay? – Fernando Feb 20 '17 at 21:49
1

@Fernando added a solution for your specific case. Let me know what do you think. – Adam K. Feb 20 '17 at 22:02
@Fernando if you really want the delay, you can add it just as i have written it in the generic example of transition-delay. – Adam K. Feb 20 '17 at 22:11
Hey Adam. It worked great for what I needed. I already added the transition-delay and it's almost perfect. Here's a minor problem: When hovering the mouse from top to bottom over the menu and the mouse goes down on a straight line, you will notice that the dropdown still shows up even though I added the delay. Please let me know if I was clear enough. – Fernando Feb 20 '17 at 22:23
1

just changed the pointer-events: auto; to pointer-events: none; Worked like a charm! Thanks a lot Adam!!! – Fernando Feb 20 '17 at 22:28
Hey Fernando... I am not quite sure if i understand... It behaves completely normally for me, although there is a moment, when the submenu is so tall, that before cursor exits the hovered element, it exits the browser window, so the hover-out is never triggered. If this is what you have in mind, then it cannot be "fixed" anyhow. Edit: Oh, glad it helped :) @Fernando – Adam K. Feb 20 '17 at 22:28
Ok. Hey again Adam. When changed the "pointer-events" from auto to none, the dropdown acted normally but when I hovered over the dropdown, it vanished. As I mentioned before, if you go from top to bottom on a straight line with your mouse, you will notice that as soon as you pass the menu, the dropdown acts like it was already visible and it shows a 0.2 secs later (time that I set). Can you replicate that? Thanks – Fernando Feb 20 '17 at 23:14
Here's a gif to help you understand: http://im2.ezgif.com/tmp/ezgif-2-8ad2b2ca8c.gif See when I go from bottom up it doesn't trigger but when I go from top to bottom is triggers. Please let me know. Thanks – Fernando Feb 20 '17 at 23:21
@Fernando There are couple of ways... Add the transition delay to the default state (non-hovered) / change the max height to something more real - like 1000px and make transition time longer (the scrolling will be visible thought) - the reason is, even though the window is not yet visible (opacity around 0.01 etc...) the colision box making it hovered at full height is almost instantly present... If you delay transition even for initial hover, then you would probably prevent these quick hovers. – Adam K. Feb 20 '17 at 23:37
Try `.vnav__subnav, .overlay { transition: opacity .5s, max-height 1s; pointer-events: none; display: block!important; opacity: 0; max-height: 0; transition-delay: .3s; overflow: hidden;} li:hover > .vnav__subnav, #display_menu_1:hover + .overlay { opacity: 1; pointer-events: auto; max-height: 999px; transition: opacity 0.5s, max-height 3s; transition-delay: .3s; }` - The **overflow:hidden** is crucial. What is triggering full-height hover "colision box" are the submenu contents. – Adam K. Feb 20 '17 at 23:51
@Fernando i am sorry, but this will probably require some timing tinkering, if it has to be done only via css... – Adam K. Feb 20 '17 at 23:56
@Fernando found the source of the problem `padding: 15px 190px 340px 15px !important;` This makes the submenu height instantly big enough to keep submenu hovered. Menu items without this forced height padding don't have the issue. – Adam K. Feb 21 '17 at 07:14
@Fernando this should help `#display_menu_1 > ul > li:nth-child(n):not(:hover) > ul{ padding-bottom:0 !important; } #display_menu_1 > ul > li > ul{ transition: padding-bottom .5s, max-height .5s, opacity .5s!important; transition-delay:.5s!important; } #display_menu_1 > ul > li:hover > ul{ transition:padding-bottom .3s, max-height .3s, opacity .5s!important; transition-delay:.5s!important; }` – Adam K. Feb 21 '17 at 07:25
You're a genius Adam! Thanks a lot for your patience and help. Now it's working 100% as I needed. You're the best! ;) – Fernando Feb 21 '17 at 15:15
@Fernando oh you :P - Now on serious note - i think it looks quite nice, you did a good job with fining the timers. The animation and delay feels just right. – Adam K. Feb 21 '17 at 17:11
1

Thanks Adam. If you have any suggestions for improvement regarding my website, please let me know. Cheers! – Fernando Feb 21 '17 at 23:22

How to add a hover delay on a menu for a Volusion site?

1 Answers1