Prevenir cierre instantáneo de menú con css3


Gracias a css podemos conseguir el efecto "hoverIntent", que previene que un submenú flotante se cierre en el mismo instante en el que nos salimos 1 píxel de la zona de hover. 

El truco es bien sencillo. A los elementos del menú les ponemos la propiedad css

.li,li:hover {
transition: all 0.1s
}

Esto hace que se produzca una animación entre los posibles estados del elemento. Por tanto, añadimos un retraso a dicha animación con la siguiente propiedad:

transition-delay: 0.3s

Y listo, con este retardo será suficiente para mejorar la navegación por los menús.

El código quedaría así:

li,li:hover {
transition:all 0.3s;
transition-delay:0.3s;
}

 

 

20-06-2016 16:51 Rodrigo Medina {writeRevision}
Valoración media: 0 (0 votos)

Puedes añadir un comentario

Chuck Norris has counted to infinity. Twice.