Menú responsive y funcional solo con HTML y CSS
En el mundo del diseño web responsive, uno de los elementos más comunes y útiles son los menús. Aunque muchas veces frameworks como Bootstrap ofrecen soluciones rápidas y “eficientes” (entre comillas), es mucho más gratificante construir tú mismo el menú desde cero, y aquí lo vas a lograr utilizando solo HTML y CSS.
Otra ventaja de hacerlo desde cero, es la personalización. Al usar Bootstrap, es fácil caer en el mismo diseño que otros sitios web. Además, para que elcomponente Navbar de bootstrap funcione correctamente, es necesario agregar el JavaScript, y en mi caso, quiero hacer un menú sin nada de JavaScript.
Ahora, tengamos en cuenta que para lograr que nuestro menu sea reponsive y funcional usando solo HTML y CSS, existen varios métodos que vamos a ir conociendo y profundizando poco a poco.
Estructura del menú
Vamos a comenzar con una estructura mínima con un html muy básico:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Responsive sin JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">Mi Sitio</div>
<nav>
<a href="#menu" class="menu-icon">☰</a>
<ul class="nav-list" id="menu">
<a href="#!" class="menu-close">✖</a>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre Nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
</body>
</html>
Lo más relevante en el código anterior, es la vinculación con la hoja de estilo y la estructura del menú.
Estilos recomendados
Lo interesante viene a continuación en las reglas de estilos, usamos flexbox para alinear los elementos del menú, también algunas media queries y para darle funcionalidad, usamos la pseudoclase :target:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
}
/* Contenedores flex, y bg */
header,
nav,
.nav-list {
display: flex;
background: #333;
}
/* Elementos ocultos para desktop */
.menu-icon,
.menu-close {
display: none;
}
header {
position: relative;
align-items: center;
justify-content: space-between;
width: 100%;
height: 60px;
padding: 0 20px;
}
.nav-list {
list-style: none;
gap: 25px;
}
@media(max-width: 768px) {
/* Mobile */
/* Mostrar el icono hamburguesa */
.menu-icon {
display: block;
}
.nav-list {
/* Ocultamos el menu por defecto */
display: none;
/* ---------- */
position: absolute;
top: 60px;
right: 0;
width: 100%;
flex-direction: column;
align-items: center;
padding: 10px;
}
/* Mostramos el menu y el botón para cerrarlo */
#menu:target,
#menu:target .menu-close {
display: flex;
}
.menu-close {
align-self: flex-start;
}
}