Remove delay of Superfish dropdown menu onmouseover, while keeping the Hoverintent delay onmouseout

Question

I'm having trouble removing the initial delay of the Superfish dropdown fix. My client wants a delay onmouseout, but not a delay onmouseover.

I've got a pure CSS dropdown menu (identical to the Twentyten dropdown menu) and am applying Suckerfish.js to this.

Here is my code:

$('ul#menu-airco-mb-navigatiestructuur').superfish({
    delay: 600,
    autoArrows:    false,
    speed: 'fast'
}); 

I've been reading through the manual of Superfish, but I can't seem to find what triggers the initial delay. Maybe it has something to do with the animation animation: {opacity:'show'} (which I cannot seem to get my head around).

Assistance is appreciated!

Rosenblum

Answer 1

It seems like you might be including the HoverIntent plugin. One of Superfish's options is "disableHI". If you set that to "true" then Superfish will not use HoverIntent to delay the mouseenter event. Or you could just not include the HoverIntent plugin if you do not plan on using it elsewhere on the site. Hope this helps.

$('ul#menu-airco-mb-navigatiestructuur').superfish({
    delay: 600,
    autoArrows: false,
    speed: 'fast',
    disableHI: true
});

I have created two test cases. The first one is a simplified version of your page using your CSS and the second is exactly the same except I removed all your CSS and only included the basic superfish.css found on the Superfish website. I also altered the menu class from 'menu' to 'sf-menu' just so the superfish.css works.

Notice that the version with my CSS works like you want it to, whereas the the one with your CSS has the bug you describe. I guess there is a CSS issue that you could sort out by comparing mine to yours and altering yours to match it closer. One difference I see is that I set the sub menu ULs to a fixed em width and their child LIs to 100%, whereas you do not. This isn't the culprit, but shows that you may benefit from aligning your CSS more closely with the tried and tested way of doing Superfish menus. Hope this helps.

Nutgall

Hi Joel, thank you for your answer, but I would like to keep the hoverIntent behaviour onmouseout, I just would like to remove the hoverIntent BEFORE (onmouseover) the display of a submenu. I've spoken to the creator of hoverIntent and he advises me to try and edit the core of Superfish, so as to remove hoverIntent onmouseover. What are your views on this? Thanks in advance. – Rosenblum

Superfish handles the mouseout delay via its "delay" option, leaving HoverIntent (if included) to handle the mouseover event. disableHI removes HoverIntent onmouseover, but leaving "delay" set to 600 should still retain the mouseout delay. – Nutgall

Thanks again. I've followed your instructions, but apparently without success. Could you please have a look at my implementation on [link]mediasoft.chocolata.be to see what could be the issue? – Rosenblum

Thank you, Joel! As you suggested, it was a pure CSS only issue. Thank you for giving me your in-depth insights on superfish.js and hoverIntent.js. I really appreciate your efforts! – Rosenblum

Answer 2

What you're seeing on mouseover isn't any delay but the actual animation running.

I suppose you could remove animation.

If you only animate the height you get immediate visual response as opposed to opacity which takes a second to appear.

Functionality wise that may be but you want, don't know about visually.

        $('ul#menu-airco-mb-navigatiestructuur').superfish({
            delay       : 0,
            animation   : { height:'show' },
            speed       : 'fast'
        });

Acadian

Hi acreek, thank you. Now it's already a bit clearer, but still there seems to be some slight delay. Please note that setting 'delay : 0' removes the delay onmouseOUT, while I only want to remove the delay onmouseOVER. Here you can see what I'm talking about: mediasoft.chocolata.be Could you give a hand? – Rosenblum