Como ya sabes, por defecto, en Boostrap un dropdown menu o menú desplegable se abre sólamente al pulsar o hacer click encima del mismo. Pues bien, en este tutorial te voy a mostrar cómo desplegar este tipo de menú simplemente al ubicarle por encima el puntero del ratón.
Existen varias formas de modificar este comportamiento. Una de ellas es mediante JavaScript / Jquery, utilizando el método hover(), o con CSS, que es la que emplearemos en este tutorial.
Para nuestro ejemplo vamos a crear una barra de navegación conformada por tres enlaces, y al tercero le añadiremos un menú desplegable.
Primero creamos la estructura HTML con las clases de Boostrap correspondientes.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Acerca de</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-white dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Servicios
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Diseño Web</a>
<a class="dropdown-item" href="#">Desarrollo web</a>
<a class="dropdown-item" href="#">Marketing digital</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar..." aria-label="Search">
</form>
</div>
</nav>
Lo siguiente será crear una regla CSS con la pseudo-clase “:hover” que afecte a las clases “dropdown” y “dropdown-menu”, y en la declaración escribimos la propiedad display:block. Ahora bien, estos estilos los definiremos dentro de un media query para que sólo se apliquen cuando visualicemos nuestra página por medio de dispositivos con pantallas grandes, debido a que este comportamiento no es apropiado para dispositovos móviles, por ejemplo un Smartphone.
@media screen and (min-width: 768px){
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
}
Ahora cuando pasamos el punter del ratón por encima del menú veremos que se despliega automáticamente sin necesidad de pulsar sobre el mismo.
See the Pen Abrir un menú desplegable de Boostrap al pasarle por encima el puntero del ratón by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024