Menú responsive en Tailwind, Bootstrap y CSS
Etiquetas:
Crear un menú de navegación responsivo que se adapte bien a dispositivos móviles y escritorio es fundamental en el desarrollo web moderno. En este tutorial analizaremos y compararemos tres enfoques populares con ejemplos prácticos.
Menú Responsive con TailwindCSS v4
Características
-
Uso de clases utilitarias para diseño.
-
Flexbox para alinear elementos horizontalmente.
-
Adaptación con clases responsivas
sm:. -
Sin JavaScript para el menú básico.
Código completo:
<!-- Tailwind CSS v4 CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@4.0.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="bg-indigo-700 shadow-lg">
<div class="container mx-auto">
<div class="sm:flex justify-around">
<a href="#" class="text-white text-3xl font-bold p-3">CODEA APP</a>
<ul class="text-gray-400 sm:self-center text-xl border-t sm:border-none">
<li class="sm:inline-block">
<a href="#" class="p-3 hover:text-white">Menu 1</a>
</li>
<li class="sm:inline-block">
<a href="#" class="p-3 hover:text-white">Menu 2</a>
</li>
<li class="sm:inline-block">
<a href="#" class="p-3 hover:text-white">Menu 3</a>
</li>
<li class="sm:inline-block">
<a href="#" class="p-3 hover:text-white">Menu 4</a>
</li>
<li class="sm:inline-block">
<a href="#" class="p-3 hover:text-white">Menu 5</a>
</li>
</ul>
</div>
</div>
</nav>
Menú Responsive con Bootstrap 5
Características
-
Uso de componentes
navbarpreconstruidos. -
JavaScript para menú hamburguesa.
-
Adaptación automática con clases
navbar-expand-lg. -
Accesibilidad incorporada.
Código completo:
<!-- Bootstrap 5 CSS y JS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Menú Responsive con CSS Puro
Características
-
Control total con CSS y HTML.
-
Uso de checkbox para activar menú hamburguesa.
-
Transiciones para animar apertura/cierre.
-
Media queries para adaptar diseño.
Código completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MENU RESPONSIVE</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
header {
height: 70px;
background-color: #22292F;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 50px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
cursor: pointer;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: block;
padding: 12px;
color: #DAE1E7;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover, nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked ~ nav {
max-height: 200px;
}
@media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: 0;
max-height: none;
background-color: transparent;
}
nav ul {
display: flex;
justify-content: flex-end;
}
nav ul li {
padding-left: 20px;
}
}
</style>
</head>
<body>
<header class="menu">
<div class="menu-wrap">
<img src="logo.png" class="logo-img" alt="Logo" />
<input type="checkbox" id="checkbox" />
<label for="checkbox" class="menu-icon">☰</label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Finalmente
-
TailwindCSS v4 es ideal para proyectos que requieren rapidez y personalización con poco CSS adicional.
-
Bootstrap 5 es perfecto para quienes quieren funcionalidad lista para usar, con componentes robustos y soporte JS.
-
CSS puro es mejor para aprendizaje profundo, proyectos ligeros o cuando se desea control total sin dependencias.
Recurso del Tutorial
GratisTutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
