Elimine el retraso del menú desplegable Superfish al pasar el mouse, mientras mantiene el retraso de Hoverintent al pasar el mouse

3 minutos de lectura

avatar de usuario
chocolata

Tengo problemas para eliminar el retraso inicial de la corrección del menú desplegable Superfish. Mi cliente quiere un retraso en el mouseout, pero no un retraso en el mouseover.

Tengo un menú desplegable CSS puro (idéntico al menú desplegable Twentyten) y estoy aplicando Suckerfish.js a esto.

Aquí está mi código:

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

he estado leyendo el manual de superfish, pero parece que no puedo encontrar qué desencadena el retraso inicial. Tal vez tenga algo que ver con la animación. animation: {opacity:'show'} (que parece que no puedo entender).

¡Se agradece la ayuda!

avatar de usuario
joel_birch

Parece que podría estar incluyendo el complemento HoverIntent. Una de las opciones de Superfish es “disableHI”. Si establece eso en “verdadero”, entonces Superfish no usará HoverIntent para retrasar el evento mouseenter. O simplemente podría no incluir el complemento HoverIntent si no planea usarlo en otra parte del sitio. Espero que esto ayude.

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

He creado dos casos de prueba. los el primero es una versión simplificada de su página usando su CSS y el segundo es exactamente lo mismo, excepto que eliminé todo su CSS y solo incluí el superfish.css básico que se encuentra en el sitio web de Superfish. También modifiqué la clase de menú de ‘menu’ a ‘sf-menu’ solo para que funcione superfish.css.

Tenga en cuenta que la versión con mi CSS funciona como usted desea, mientras que la que tiene su CSS tiene el error que describe. Supongo que hay un problema de CSS que podría resolver comparando el mío con el suyo y modificando el suyo para que coincida más. Una diferencia que veo es que configuré las UL del submenú en un ancho em fijo y sus LI secundarias en 100%, mientras que usted no lo hace. Este no es el culpable, pero muestra que puede beneficiarse al alinear su CSS más de cerca con la forma comprobada de hacer menús de Superfish. Espero que esto ayude.

  • Hola Joel, gracias por tu respuesta, pero me gustaría mantener el comportamiento de hoverIntent onmouseout, solo me gustaría eliminar el hoverIntent ANTES (onmouseover) de la visualización de un submenú. He hablado con el creador de hoverIntent y me aconseja que intente editar el núcleo de Superfish, para eliminar hoverIntent onmouseover. ¿Cuáles son sus puntos de vista sobre esto? Gracias por adelantado.

    – chocolata

    14 de diciembre de 2011 a las 12:47

  • Superfish maneja el retraso del mouseout a través de su opción de “retraso”, dejando que HoverIntent (si está incluido) maneje el evento del mouseover. disabledHI elimina HoverIntent onmouseover, pero dejar el “retraso” establecido en 600 aún debería retener el retraso del mouseout.

    – joel_birch

    14 de diciembre de 2011 a las 13:15

  • Gracias de nuevo. He seguido tus instrucciones, pero aparentemente sin éxito. ¿Podría echar un vistazo a mi implementación en https://stackoverflow.com/questions/8229013/remove-delay-of-superfish-dropdown-menu-onmouseover-while-keeping-the-hoverintemediasoft.chocolata.be a ver cual puede ser el problema?

    – chocolata

    14 de diciembre de 2011 a las 13:21


  • ¡Gracias, Joel! Como sugirió, era un problema de CSS puro. Gracias por brindarme sus conocimientos profundos sobre superfish.js y hoverIntent.js. ¡Realmente aprecio tus esfuerzos!

    – chocolata

    15 de diciembre de 2011 a las 20:33

avatar de usuario
Arroyo

Lo que está viendo al pasar el mouse por encima no es ningún retraso, sino la animación real en ejecución.

Supongo que podrías eliminar la animación.

Si solo animas la altura, obtienes una respuesta visual inmediata en lugar de la opacidad, que tarda un segundo en aparecer.

En cuanto a la funcionalidad, puede ser, pero usted quiere, no sabe acerca de visualmente.

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

  • Hola acreek, gracias. Ahora ya está un poco más claro, pero todavía parece haber un ligero retraso. Tenga en cuenta que configurar ‘retraso: 0’ elimina el retraso en el mouseOUT, mientras que solo quiero eliminar el retraso en el mouseOVER. Aquí puedes ver de lo que hablo: mediasoft.chocolata.be ¿Podrías dar una mano?

    – chocolata

    23 de noviembre de 2011 a las 12:28

¿Ha sido útil esta solución?