🥇 ▷ Cómo hacer un menú de hamburguesa receptivo [CSS]

A Menú de hamburguesas CSS (responsive) es uno de esos fantásticos menús de navegación deslizables que aparecen al hacer clic en esos iconos de menú de tres líneas.

(También es una forma conveniente de comprar comida rápida, pero eso no es importante en este momento)

En esta publicación, aprenderás cómo crear un menú de hamburguesas receptivo (solo CSS, ¡no se necesita JS!). Pero te estarás preguntando, ¿por qué molestarse? ¿Por qué ocultar su hermosa navegación detrás de un ícono de hamburguesa?

Según Oberlo, más 56% del tráfico web llega a través de dispositivos móviles.
Los menús de navegación de ancho completo a menudo no se pueden usar en pantallas pequeñas.
Posicionar los elementos del menú verticalmente resuelve este problema, pero luego el usuario tiene que desplazarse más allá del menú para llegar al contenido, lo que no es ideal.
Al utilizar un posicionamiento fijo en el ícono de la hamburguesa, sus visitantes pueden acceder a la navegación sin importar dónde se encuentren en su página.

OK basta de hablar, ¡hagamos uno! Primero, comenzaremos con la estructura…

Si estuviéramos usando JavaScript para hacer esto, configuraríamos un detector de eventos para detectar cuándo el usuario hace clic en el icono y luego activar el menú para que aparezca.

Dado que estamos haciendo este menú de hamburguesas receptivo al estilo CSS, tenemos que usar un enfoque diferente.

Necesitamos dos elementos, un botón para el ícono y un navegador para el menú en sí. El elemento de navegación debe estar anidado dentro del botón:

<button id="hamburger-menu">
<nav id="sidebar-menu">
</nav>
</button>

Puedes llenar tu menú de navegación con lo que quieras. Solo usaremos algunas páginas comunes de nivel superior para este ejemplo (¡no olvide reemplazar # con las URL de su página real!):

<label id="hamburger-menu">
<nav id="sidebar-menu">
<h3>Menu</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</label><div class="overlay"></div>

ver la pluma
en CódigoPen.

OK, tenemos la estructura ordenada… pero no se ve como queremos, y no hace nada. Resolvamos eso con algo de CSS…

Hay muchas maneras de obtener las tres líneas del ícono de la hamburguesa: usaremos un degradado lineal como Chris Coyier en los trucos de CSS. explica:

#hamburger-menu {
width: 50px;
height: 50px;
display: block;
border: none;
background: linear-gradient(
to bottom, 
#3D0E61, #3D0E61 20%, 
white 20%, white 40%, 
#3D0E61 40%, #3D0E61 60%, 
white 60%, white 80%, 
#3D0E61 80%, #3D0E61 100%
);
}

Ahora, debido a que el menú está anidado dentro del ícono de la hamburguesa, debemos establecer su posición en absoluto. Esto lo saca del flujo y nos permite posicionarlo manualmente.

Estableceremos la parte superior del menú de hamburguesa receptivo en 0, la izquierda en -250 px y el ancho en 200 px. Esto lo colocará fuera de la pantalla.

Técnicamente, solo necesitamos configurar la izquierda en -200px, ya que así de ancho es el elemento. Pero me gusta agregar un poco más, solo como seguro. También configuraremos la visibilidad como oculta por si acaso.

#hamburger-menu #sidebar-menu {
visibilty: hidden;
position: fixed;
top: 0;
left: -250px;
width: 200px;
height: 100%;
transition: 0.3s;
}

Ahora tenemos un ícono de menú de hamburguesas y no podemos ver el menú, todavía. Hasta ahora, todo bien:

ver la pluma
en CódigoPen.

Entonces, ¿cómo hacer que el menú de hamburguesas receptivo funcione realmente, sin usar JavaScript? ¿Cómo conseguimos un verdadero menú de hamburguesas con estilo CSS?

Usaremos una casilla de verificación oculta junto con la pseudoclase :checked. Es un pequeño truco para asegurarse de que nuestra casilla de verificación no solo funcione en computadoras de escritorio sino también en dispositivos de pantalla táctil, donde los elementos de enfoque no son importantes.

Pero … ¿cómo hacer que una casilla de verificación cambie su estado: marcado cuando no está visible? Usando un elemento de etiqueta para esa casilla de verificación y mostrando ese elemento de etiqueta en su lugar.


<input type="checkbox" id="hamburger-input" class="burger-shower" />


	
  



	
  




<label id="hamburger-menu" for="hamburger-input">
<nav id="sidebar-menu">
<h3>Menu</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</label>

<div class="overlay"></div>

Aplicaremos un estilo a la etiqueta para que parezca un menú de hamburguesas, de modo que cuando alguien haga clic en ella, el estado de la casilla de verificación oculta también cambie.

De esta forma, podemos activar condicionalmente cambios de CSS en otros elementos mediante el uso de la pseudoclase :checked.

#hamburger-input:checked + #hamburger-menu #sidebar-menu {
visibility: visible;
left: 0;
}
#hamburger-input:checked ~ .overlay{
visibility: visible;
opacity: 0.4;
}

Dos cosas a tener en cuenta aquí:

Observe cómo estamos usando el combinador + símbolo en nuestro CSS. Este es un símbolo combinador que nos permite seleccionar hermanos inmediatos al primer elemento.
También estamos usando el símbolo ~. Esto nos permite seleccionar hermanos no inmediatos. Y necesitamos usarlo porque .overlay no está inmediatamente después de #hamburger-input.
Observe los estilos que hemos aplicado. Establecemos la visibilidad en visible (¡siempre es una buena idea si desea que las personas vean las cosas!), y establecemos la propiedad izquierda en 0; esto lo hará visible (recuerde que antes era -250px).

Tal como está, esto haría que el menú CSS Hamburger apareciera instantáneamente en la pantalla. Pero es mucho más genial que se deslice desde la izquierda. Para hacerlo, aplicamos una transición al elemento #sidebar-menu:

transition: 0.3s;

Esto significa que tardará 0,3 segundos en deslizarse; puede cambiar esto para que se ajuste a sus preferencias.

OK, ahora vamos a ver cómo se ve! También he agregado un poco de estilo adicional al menú:

ver la pluma
en CódigoPen.

Si el usuario desea cerrar el menú, solo necesita hacer clic o tocar cualquier cosa fuera del menú en sí, una forma común e intuitiva de hacerlo.

Si el menú de hamburguesas de CSS es todo lo que necesita, está listo para comenzar, ¡disfrútelo!

Pero si también está interesado en configurar un menú de hamburguesas CSS receptivo, ¡entonces quédese!

Aquí está el plan:

Si el visitante tiene una pantalla lo suficientemente ancha, le mostraremos una barra de navegación de ancho completo.
Si tienen una pantalla más pequeña, les mostraremos el menú de hamburguesas CSS.

Primero, configuremos la barra de navegación horizontal. El HTML:

<nav id="main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>  
</nav>

… y el CSS:

#main-menu {
display: block;
height: 100px;
width: 100%;
background: #3D0E61;
margin: 0px;
}#main-menu ul {
max-width: 800px;
width: 100%;
height: 100%;
margin: 0px auto;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#main-menu li {
list-style-type: none;
font-size: 2rem;
}



	
  



	
  



#main-menu a {
color: #B9FAF8;
font-size: 1.5rem;
text-decoration: none;
}
#main-menu a:hover {
text-decoration: underline;
}

Debido a que el ícono de la hamburguesa es un elemento de bloque, esta barra de navegación lo empujará fuera de posición, así que asegurémonos de que permanezca en la parte superior izquierda de la pantalla agregando el siguiente código a #hamburger-menu:

position: fixed;
top: 20px;
left: 20px;

Ahora para la parte ‘receptiva’…

Usaremos una consulta de medios para esto.

Necesitamos elegir un punto de interrupción: un ancho de pantalla que hará que la pantalla cambie entre el menú de ancho completo y el menú de hamburguesa CSS receptivo.

El ancho que elija será exclusivo para usted: si tiene muchos elementos de menú, deberá ser más ancho. Para este ejemplo, usaré 750px:

@media screen and (max-width: 750px) {
#main-menu {
display: none;
}
#hamburger-menu {
display: inline;
}
}

Cuando la pantalla es más pequeña que 750 px, se aplicarán estos estilos.

Y también necesitamos ocultar el menú de hamburguesa receptivo (CSS) cuando la pantalla es más ancha que 750px. Para hacer eso, simplemente cambiamos display: block; para mostrar: ninguno en #hamburger-menu`. Así que estará oculto por defecto.

Resultado final

¡Eso es todo! Aquí está el menú final de CSS Hamburger (responsive):

ver la pluma
en CódigoPen.

¡Espero que te haya sido útil! Puede tomar esto como una plantilla y cambiar los colores y estilos para satisfacer sus necesidades.

Personalmente, me encanta cómo se ve un menú de hamburguesas CSS en sitios web de pantalla completa. Si no me crees, compruébalo tú mismo:

ver la pluma
en CódigoPen.

Avance

¿Guay, verdad? Si te gusta este estilo elegante, te recomiendo que consultes fullPage.js. Es una biblioteca JS que le permite crear sitios web receptivos de página completa de aspecto profesional con mucha facilidad. Entonces solo tienes que añadir tu Menú Hamburguesa CSS Responsive y… ¡voilá! ¡Tu sitio web está listo!

Su navegador no soporta la etiqueta de vídeo.

FullPage.js también ofrece algunas opciones de navegación interesantes que le pueden gustar, ya sea que desee una barra de desplazamiento, puntos de navegación, enlaces de anclaje o desplazamiento continuo, está cubierto. Y hay algunas animaciones geniales para llevar a las personas de una página a otra: el efecto de gota es uno de mis favoritos.

Sobre el Autor:

warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net

Tabla de Contenido

Cómo hacer un menú de hamburguesa receptivo [CSS]

Agregar la barra de navegación principal

Resultado final

Artículos Relacionados: