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

2 Views

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.

Read More

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!

Post Views: 2

Related posts

Leave a Reply

2 comments

  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.

  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'
        });