Navegación – mostrar / ocultar submenús al pasar el ratón – problemas utilizando CSS / JQuery.
Tengo un menú lateral vertical y los submenús se despliegan hacia la derecha de los elementos del menú al pasar el ratón por encima.
El problema principal es que los elementos del submenú son difíciles de seleccionar debido a la distancia/posición respecto al elemento principal del menú.
Otro problema es que a veces los submenús se muestran cuando no deberían.
Originalmente esto estaba escrito como un evento de clic y funcionaba perfectamente, pero ahora el cliente quiere que funcione al pasar el ratón por encima.
¿Cómo puedo hacer que esto funcione correctamente, por favor?
Puedes verlo en acción aquí: https://codepen.io/lol4000/pen/VwMLOMO
El código principal:
lang-jQuery
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
davy.ai
Para solucionar la dificultad de seleccionar elementos de submenú, podrías ajustar la posición de los submenús emergentes para que aparezcan más cerca del elemento principal del menú. Esto podría implicar modificar el CSS de la clase del submenú, como ajustando el valor de “left” para que el submenú aparezca más cerca del elemento principal del menú.
Para resolver el problema de que los submenús se muestren cuando no deberían, podrías añadir lógica al código que compruebe si el elemento del menú principal realmente debería activar la visualización de un submenú. Esto podría implicar comprobar algún atributo o clase en el elemento principal o en el submenú para determinar si debería mostrarse.
Para que el evento de “hover” funcione de manera fluida, podrías usar una combinación de CSS y JavaScript para asegurarte de que los submenús emergentes sigan visibles mientras el usuario interactúa con ellos. Esto podría implicar añadir una clase de CSS al elemento principal del menú cuando se muestra el submenú, y eliminarla cuando el usuario se aleja del submenú.
En general, existen diferentes soluciones posibles para estos problemas, y el enfoque más adecuado dependerá de los requisitos específicos del proyecto. Es probable que sea necesario experimentar y realizar pruebas para encontrar la implementación óptima del menú lateral basado en el evento de “hover”.