Cómo crear una barra de navegación responsiva con flexbox

() translation by (you can also view the original English article)

¡Es momento de un ejercicio práctico en flexbox! En este tutorial utilizaremos flexbox para crear una barra de navegación basada en el enfoque «móviles primero», que sea responsiva y que se pueda alternar con diferentes diseños en pantallas de dispositivos móviles, de tabletas y de escritorio.

Flexbox es perfecto para la navegación responsiva

Flexbox es un módulo de diseño versátil con el que podemos crear diseños unidimensionales que requieran flexibilidad, como los menús responsivos. Utilizando las propiedades de ordenamiento, alineación y tamaño de flexbox, podemos crear barras de navegación que adapten sus diseños al tamaño de la ventana gráfica, manteniendo el esquema HTML accesible y lógico.

En este tutorial, veremos cómo crear una barra de navegación responsiva con flexbox. Nuestra navegación con flexbox tendrá tres diseños distintos, dependiendo del tamaño de la ventana gráfica:

un diseño para dispositivos móviles en el que únicamente el logotipo y un botón de conmutación serán visibles de manera predeterminada y los usuarios podrán abrir y cerrar el menú utilizando la conmutación,
un diseño para tabletas en la que mostraremos dos botones de llamada a la acción entre el logotipo y la conmutación en el estado predeterminado y el resto del menú permanecerá conmutable,
un diseño para computadoras de escritorio en el que todos los elementos del menú, excepto el botón de conmutación, serán visibles en la pantalla.

Usaremos media queries para detectar el tamaño de la ventana del navegador del usuario. Nuestra barra de navegación responsiva se basará en el enfoque móviles primero, por lo que primero crearemos el diseño para los dispositivos móviles. Luego, añadiremos el CSS específico para las tabletas y las computadoras de escritorio usando media queries de ancho mínimo (min-width)

Así es como se verá el menú en los dispositivos móviles cuando lo abra el usuario:

Aquí está la versión para tabletas:

Y así es como se verá nuestra navegación de flexbox en las computadoras de escritorio :

Lo mejor de los menús con flexbox es que son realmente muy accesibles, ya que el HTML es solamente una simple lista no ordenada. Así, los usuarios de lectores de pantalla ni siquiera notarán que hay diferentes diseños, pues todo el estilo se hace con CSS y un poco de jQuery (para la funcionalidad de la conmutación).

También puedes probar la demostración interactiva:

¿Eres nuevo en Flexbox?

Si no estás acostumbrado a flexbox o necesitas un repaso, estas guías para principiantes te darán todas las habilidades que necesitas para completar este tutorial:

1. Crea el HTML

El HTML es una simple lista <ul>, como podrás ver a continuación. La clase .menu será el contenedor flexible y los elementos de la lista serán los elementos flexibles. Su orden se adaptará al tamaño de la ventana gráfica del dispositivo del usuario. Por ejemplo, los botones de Log In (Iniciar sesión) y Sign Up (Registrarse) aparecerán primero en los dispositivos móviles, pero se mostrarán al final del menú en las computadoras de escritorio. Lograremos este efecto usando las propiedades de ordenamiento de flexbox.

  <nav> <ul class="menu"> <li class="logo"><a href="#">Invisible App</a></li> <li class="item"><a href="#">Home</a></li> <li class="item"><a href="#">About</a></li> <li class="item"><a href="#">Services</a></li> <li class="item"><a href="#">Features</a></li> <li class="item"><a href="#">Blog</a></li> <li class="item"><a href="#">Contact</a> </li> <li class="item button"><a href="#">Log In</a></li> <li class="item button secondary"><a href="#">Sign Up</a></li> <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li> </ul> </nav>

Nota: el botón de conmutación al final de la lista utiliza un ícono de Font Awesome. Deberás añadir Font Awesome a la sección <head> del HTML y jQuery al final de la sección <body> para que la demostración funcione correctamente.

2. Añade un poco de estilos básicos

Para los estilos básicos, he establecido algunos valores y colores predeterminados, sin embargo, también puedes usar cualquier otra regla de estilos:

  /* Basic styling */ * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: sans-serif; } nav { background: #222; padding: 5px 20px; } ul { list-style-type: none; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } .logo a:hover { text-decoration: none; } .menu li { font-size: 16px; padding: 15px 5px; white-space: nowrap; } .logo a, .toggle a { font-size: 20px; } .button.secondary { border-bottom: 1px #444 solid; }

3. Empieza con la navegación móvil

Puesto que nuestra navegación estará basada en el enfoque móviles primero, empezaremos con el diseño móvil. Los menús de flexbox responsivos por lo general crean diseños basados en columnas para los dispositivos móviles. Al añadir la regla flex-direction: column; al contenedor flexible, podemos empaquetar rápidamente los elementos del menú uno debajo del otro.

Si bien esta es una solución excelente, no la usaremos en nuestro ejemplo. En su lugar, crearemos un diseño envolvente basado en filas para dispositivos móviles, de modo que podamos mostrar el logotipo y el botón de conmutación uno al lado del otro en la parte superior del menú.

El truco de CSS aquí es que haremos que los elementos del menú regular como Home (Inicio) y About (Acerca de...) se extiendan por todo el contenedor usando la regla width: 100%;. Así, flexbox los mostrará uno debajo del otro, mientras que el logotipo y la conmutación conservarán su tamaño natural y se situarán encima de la barra de navegación en la misma fila.

En el CSS a continuación, también usamos las propiedades justify-content y align-items para alinear los elementos flexibles de forma horizontal y vertical. Además, ocultamos los elementos .item usando la regla display: none;. Los elementos del menú únicamente se mostrarán cuando el usuario haga clic en el botón de conmutación. La clase .active no está en el código HTML, la añadiremos dinámicamente con un pequeño script jQuery.

  /* Mobile menu */ .menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .toggle { order: 1; } .item.button { order: 2; } .item { width: 100%; text-align: center; order: 3; display: none; } .item.active { display: block; }

Como podrás ver arriba, también hemos cambiado el orden de los elementos del menú con la ayuda de la propiedad de order. Nuestra estructura HTML sigue un orden lógico. Así es como queremos que los usuarios de lectores de pantalla y los robots de los motores de búsqueda recorran el menú.

No obstante, en el diseño para dispositivos móviles, queremos mostrar el logotipo y el botón de conmutación en la parte superior del menú. También queremos mostrar los dos botones de llamada a la acción antes de los elementos regulares del menú. Así que establecemos el siguiente orden:

.logo obtiene el valor order: 0;, pues será el primer elemento (sin embargo, como este es el valor predeterminado de order, no necesitamos añadirlo al CSS),
.toggle obtiene 1, ya que viene justo después de .logo,
.item.button perteneciente a los botones Log In y Sign Up obtiene 2,
e .item perteneciente al resto de los elementos del menú obtiene 3.

4. Crea el menú para tabletas

Añadimos el diseño para tabletas usando una media query de ancho mínimo (min-width). Aquí, cuatro elementos del menú serán visibles por defecto: el logotipo, los dos botones de llamada a la acción y la conmutación. Para hacer todo bonito, nuestro CSS se encargará de:

cambiar el orden (order) de los elementos del menú para adaptar el diseño a las ventanas gráficas de las tabletas,
realinear los elementos (consulta la explicación a continuación),
hacer que los botones Log In y Sign Up parezcan botones reales (en el diseño para dispositivos móviles, se presentan como enlaces, pues forman parte de la lista desplegable conmutable).

En código:

  /* Tablet menu */ @media all and (min-width: 600px) { .menu { justify-content: center; } .logo { flex: 1; } .toggle { flex: 1; text-align: right; } .item.button { width: auto; order: 1; display: block; } .toggle { order: 2; } .button.secondary { border: 0; } .button a { padding: 7.5px 15px; background: teal; border: 1px #006d6d solid; } .button.secondary a { background: transparent; } .button a:hover { text-decoration: none; } .button:not(.secondary) a:hover { background: #006d6d; border-color: #005959; } .button.secondary a:hover { color: #ddd; } }

En el diseño para tabletas, los elementos del menú están alineados de una forma diferente. Si les echas un vistazo a los cuatro elementos de menú visibles, verás que los dos botones se muestran en el centro, mientras que el logotipo y la conmutación son empujados hacia el extremo izquierdo y derecho del contenedor:

Podemos lograr este efecto utilizando la regla flex: 1; de CSS. La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-basis. Puede existir con muchas combinaciones de valores diferentes. Cuando se declara con un solo valor, pertenece a flex-grow, mientras que flex-shrink y flex-basis mantienen sus valores predeterminados.

En el CSS anterior, hemos añadido la regla flex: 1; a los elementos .logo y .toggle. De esta forma, podemos indicar al navegador que si hay algún espacio positivo en la pantalla, queremos compartirlo entre estos dos elementos. Como los botones Log In y Sign Up conservan su valor 0 predeterminado para flex-grow, no obtendrán nada del espacio adicional. Por tanto, se quedarán en el centro del contenedor, pues se adhieren a la regla justify-content: center; establecida en el contenedor flexible.

5. Crea el menú para las computadoras de escritorio

El menú para computadoras de escritorio oculta la conmutación y restablece el orden original y el ancho natural de cada elemento.

Es importante tener presente que las reglas específicas para las tableta también se aplican al menú de computadoras de escritorio. Esto se debe a que aquí, el ancho de la ventana gráfica es mayor que 600px y 900px, por lo que ambas media queries surten efecto. Así que, .logo conserva su propiedad flex: 1; y empuja al resto de los elementos al final del contenedor.

  /* Desktop menu */ @media all and (min-width: 900px) { .item { display: block; width: auto; } .toggle { display: none; } .logo { order: 0; } .item { order: 1; } .button { order: 2; } .menu li { padding: 15px 10px; } .menu li.button { padding-right: 0; } }

6. Añade la funcionalidad de jQuery

Añadimos la funcionalidad de conmutación a los menús para los dispositivos móviles y las tabletas con un pequeño script de jQuery. Utilizando un controlador de eventos de clic, nuestro script detecta cuando el usuario hace clic o toca el botón de conmutación. Luego, con una declaración if-else, verifica si el menú desplegable se activa o se desactiva en el momento de la acción del usuario.

Cuando el menú desplegable se activa, añade la clase .active a cada elemento. También reemplaza el icono de la hamburguesa con un icono de cierre (fa-times), también de Font Awesome. Y, cuando el menú desplegable es desactivado, elimina la clase .active de cada elemento y vuelve a cambiar el icono al icono original de la hamburguesa (fa-bars).

  $(function() { $(".toggle").on("click", function() { if ($(".item").hasClass("active")) { $(".item").removeClass("active"); $(this).find("a").html("<i class='fas fa-bars'></i>"); } else { $(".item").addClass("active"); $(this).find("a").html("<i class='fas fa-times'></i>"); } }); });

Conclusión

Nuestra barra de navegación responsiva basada en el enfoque móviles primero, está funcionando en tres diseños diferentes. Flexbox es una gran herramienta para implementar diseños complejos sin ningún tipo de ajustes. Si combinas las propiedades de alineación, ordenamiento y dimensionado de flexbox con media queries, puedes crear diferentes diseños para distintas ventanas gráficas sin tener que manipular el código fuente del HTML.

Si te interesa saber cómo puedes utilizar flexbox en tu trabajo cotidiano, échale un vistazo a estos otros prácticos tutoriales, cada uno de ellos te ayudará a aprender creando cosas que en verdad puedes usar: