Bootstrap, una de las bibliotecas de CSS más populares, nos ofrece una manera eficiente y fácil de crear menús de navegación responsive. Esto significa que el menú se adapta a diferentes tamaños de pantalla, ya sea móvil, tableta o escritorio. En este blog post, vamos a ver cómo construir un menú responsive utilizando la última versión de Bootstrap (Versión 5.3), explicando cada paso detalladamente.
¿Por qué usar Bootstrap para menús responsivos?
Bootstrap nos simplifica la vida al ofrecer componentes listos para usar, como barras de navegación, botones, menús desplegables, entre otros. Esto reduce el tiempo de desarrollo, mejora la compatibilidad entre navegadores, y se ajusta automáticamente a cualquier dispositivo sin necesidad de escribir mucho CSS.
Para conocer más razones por las cuales emplear esta biblioteca en nuestros proyectos, te invito a leer mi artículo: Ventajas de usar Bootstrap en la creación de sitios Web.
Estructura básica de un menú en Bootstrap
Vamos a empezar por crear la estructura básica de un menú con la clase .navbar, un contenedor que define la barra de navegación. Usaremos también clases como .navbar-expand-lg, que hacen que el menú sea colapsable en dispositivos más pequeños.
A continuación veremos el código HTML básico con el ejemplo de un menú creado usando las ventajas que ofrece Bootstrap:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Menú Responsive con Bootstrap</title>
<!-- Enlace al CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Título del Sitio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Acerca de</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Enlace a los scripts de Bootstrap -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>En este ejemplo, los archivos bootstrap.min.css y bootstrap.bundle.min.js están apuntados a las carpetas css y js de nuestro proyecto (respectivamente). Para obtener las versiones actualizadas de estos archivos podremos acceder a https://getbootstrap.com/. Allí encontraremos las instrucciones para conseguirlos de la manera que nos resulta más cómoda: descargar de los archivos, incorporarlos vía CDN o gestionarlos vía NPM.
Explicación del código
<nav class="navbar navbar-expand-lg navbar-light bg-light">: con este código definimos la barra de navegación.navbar-expand-lgindica que el menú se colapsará en pantallas más pequeñas que lg (>= 992px).navbar-light bg-lightaplica colores claros a los textos y el fondo del menú.<a class="navbar-brand" href="#">Título del sitio</a>: aquí ubicamos el nombre del sitio o el logo. Además podemos establecer el vínculo a la página principal (en lugar de#)<button class="navbar-toggler">: este botón aparecerá cuando el menú esté colapsado. La clasenavbar-toggler-icongenera el icono de las tres rayas, comúnmente conocido como “hamburger menu”.<div class="collapse navbar-collapse" id="navbarNav">: este contenedor incluye las opciones del menú que se colapsarán en pantallas pequeñas.<ul class="navbar-nav">: dentro de este contenedor se encuentra la lista de elementos del menú.
Bootstrap nos permite personalizar de manera muy sencilla los menús utilizando clases o CSS adicional. A continuación, veremos cómo agregar un menú desplegable, cambiar colores y ajustar el comportamiento en pantallas más grandes.
Menú con desplegable
En esta sección del artículo veremos el código HTML que ejemplifica como crear un menú desplegable:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Inicio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servicios
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Desarrollo Web</a></li>
<li><a class="dropdown-item" href="#">Inteligencia Artificial</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>En este código, agregamos un menú desplegable bajo el enlace Servicios usando las clases dropdown y dropdown-menu. Al hacer clic en Servicios, se desplegarán las opciones.
Características interactivas y estilos
Además de los cambios de estilo, podemos aprovechar el JavaScript de Bootstrap para hacer que los menús sean interactivos, como abrir automáticamente submenús o cambiar estilos dinámicamente según el estado del usuario.
Si deseamos cambiar los colores del menú, podemos sobrescribir las clases de Bootstrap con nuestro propio código CSS:
<style>
.navbar .nav-link {
color: #2b307a; /* Color azul para los enlaces */
font-weight: bold; /* Se coloca bold para la tipofrafía*/
}
.navbar .nav-link:hover {
text-decoration: underline; /* El ítem del menú se subraya al pasar el mouse por encima */
}
</style>En el ejemplo anterior cambiamos el color de los ítems del menú y aplicamos bold a la tipografía. Adicionalmente incorporamos un efecto: si el usuario posiciona el mouse sobre alguno de los ítems del menú se subrayará.
Como siempre explico a mis alumnos, las hojas de estilo personalizas nos abren el lugar para la creatividad y ofrecer una mejor experiencia visual para el usuario.
En conclusión
Con Bootstrap, crear un menú responsive es simple y rápido, gracias a sus clases predefinidas y componentes integrados. Es una herramienta potente que no solo agiliza el proceso de desarrollo, sino que también asegura que el menú funcione bien en cualquier dispositivo, ofreciendo una experiencia óptima para el usuario.
Aprender a crear un menú responsive con Bootstrap nos ayuda a conocer sus características y virtudes principales, además permite que le demos un estilo moderno a nuestros sitios Web.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta