¿Alguien tiene una manera de hacer que se abra una navegación desplegable Bootstrap 5 al pasar el mouse, pero luego también ir a otra página al hacer clic también?
por ejemplo, mi menú desplegable se ve así:
<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>Y usando el CSS para que se abra al pasar el mouse
.dropdown:hover .dropdown-menu { display: block; margin-top: 0; }Al pasar el cursor por encima, el menú desplegable abre un megamenú que muestra la lista de categorías, pero también quiero que el usuario haga clic en el texto desplegable para ir a la página de la categoría principal, si eso tiene sentido. pero incluso sé que tengo un href que no va a esa página debido a data-bs-toggle. Cualquier ayuda sería apreciada.
En caso de que aún no haya encontrado una respuesta, esto es lo que debe hacer:
En el elemento ancla padre desplegable, cambie data-bs-toggle="dropdown" a data-bs-hover="dropdown" . Eso es todo. Ahora su enlace principal también funcionará.
Sin embargo, se necesita el atributo data-bs-toggle para que el menú desplegable funcione en dispositivos móviles (pantallas de resolución pequeña), por lo que mi solución es usar jQuery para restaurarlo en pantallas más pequeñas como esta:
$(document).ready(function() { if($(window).width() <= 831) { $(".nav-link.dropdown-toggle").removeAttr("data-bs-hover"); $(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown"); } });