Advertisement
  1. Web Design
  2. Navigation Design
Webdesign

Crea un menú responsivo avanzado inspirado en Netflix

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

El otro día visité el sitio web de Netflix Jobs desde mi teléfono y vi su menú fuera del lienzo (off-canvas). Realmente me gustaron las impresionantes animaciones que se activaban cada vez que lo presionabas. Así que pensé que sería un buen ejercicio tomar este menú como inspiración y enseñarte cómo crear un menú responsivo similar. ¡Empecemos de inmediato!

Lo que vamos a crear

Antes de iniciar, quiero que se tenga una claro entendimiento de lo que vamos a crear:

Este pen integrado muestra la versión móvil de nuestro menú. Asegúrate de examinarlo en una pantalla más amplia para que veas también la versión de escritorio. Puedes cambiar el tamaño de la ventana de tu navegador para ver cómo se adapta el diseño a los distintos tamaños de pantalla.

Tenemos muchas cosas que cubrir, ¡así que vamos a trabajar!

Los recursos

Para los fines de este tutorial, he incorporado los siguientes recursos en el pen:

The required assets

El logotipo Forecastr que se utilizará aquí es de Envato Elements.

forecastr
Logotipo Forecastr

1. Inicia con el marcado de la página

A primera vista, el marcado de la página puede parecer extenso, pero por favor no te sientas abrumado. De hecho, no es tan complicado como parece. De todas maneras, ¡haré todo lo posible por explicarlo!

Mira a continuación:

Déjame desmitificar lo que ocurre aquí.

Empezaremos con un header que contiene una nav (barra de navegación). Dentro, colocaremos todos los elementos de la cabecera. De manera más específica:

  • El botón de hamburguesa que abrirá el menú fuera del lienzo. Esto será visible únicamente en pantallas pequeñas y medianas (<995px).
  • Los logotipos. Tendremos dos tipos distintos de logotipos. Un logotipo vertical y un logotipo horizontal. Su visibilidad dependerá del tamaño de la ventana gráfica.
  • El elemento .top-menu-wrapper. Esto incluirá dos elementos .panel vacíos, la lista .top-menu, el botón de búsqueda y el formulario de búsqueda. Los .panels solamente serán visibles en pantallas pequeñas y medianas (<995px). Adentro de la lista .top-menu, colocaremos el elemento .mob-block que envolverá algunos elementos únicamente para dispositivos móviles, los enlaces del menú y los enlaces sociales. De forma similar a los .panels, .mob-block y los enlaces sociales aparecerán solamente en pantallas pequeñas y medianas (<995px).

2. Define algunos estilos básicos

Con el marcado preparado, continuaremos con el CSS. Nuestro primer paso es configurar algunas variables CSS y los estilos de reinicio comunes:

Nada espectacular aquí. Solo quiero comentar dos cosas.

En primer lugar, observa que le dimos font-size: 62.5% a html. Esto ajustará el tamaño base de la fuente en 10px ((62.5 / 100) *16) y anulará el tamaño de la fuente predeterminado del navegador que es de 16px (aunque la puede configurar el usuario). De esta manera, 1rem es igual a 10px y no a 16px. Eso nos permite especificar fácilmente los tamaños basados en rem para nuestros elementos.

En segundo lugar, presta atención a la clase no-transition. Más adelante utilizaremos esta clase para deshabilitar todas las transiciones CSS cuando se cambie el tamaño de la página.

Nota: por cuestiones de simplicidad no explicaré detalladamente todas las reglas de CSS en el tutorial. Aquí hay casi 400 líneas de CSS. Asegúrate de verificarlos todos haciendo clic en la pestaña CSS del proyecto de demostración.

3. Estiliza el menú móvil

Para estilizar la barra de navegación, seguiremos un enfoque de móvil primero. Es decir, primero veremos su diseño en pantallas pequeñas y medianas (<995 px), luego en pantallas más grandes.

Teniendo esto en cuenta, cuando el tamaño de la ventana gráfica sea inferior a 995 px, la barra de navegación se verá así:

The navbar layout on small and medium screens

En este punto, como puedes ver, únicamente aparecerá el botón de hamburguesa, el logotipo vertical y el botón de búsqueda (sin su texto).

La barra de navegación se comportará como un contenedor flexible. En consecuencia, le daremos justify-content: space-between y align-items: center para colocar sus elementos secundarios visibles a través del eje principal y el eje transversal.

Aquí están los estilos correspondientes:

Abrir fuera del lienzo

Cada vez que hagamos clic en el menú de hamburguesa, el elemento .top-menu-wrapper recibirá la clase show-offcanvas. En tal caso, aparecerá el menú fuera del lienzo:

The off-canvas menu

Esto aparecerá a la vista con un efecto de transición. Los elementos .panel y .top-menu serán visibles de forma secuencial con un efecto deslizante según su orden de origen. Primero aparecerá .panel1, después de 200 ms .panel2, y por último, después de 400 ms .top-menu. Al mismo tiempo, animaremos el color de fondo del pseudo-elemento :: before del .top-menu-wrapper. Este pseudoelemento servirá como una superposición que se coloca debajo del menú fuera del lienzo.

En este punto, es importante tomar nota de algunas cosas clave con respecto al diseño fuera del lienzo:

  • Tanto .panels como .top-menú serán elementos posicionados de manera fija y cubrirán toda la altura de la ventana gráfica. También estarán colocados encima de todos los demás elementos
  • Su ancho dependerá del tamaño de la ventana gráfica. Por ejemplo, en pantallas de hasta 549 px, su ancho cubrirá todo el ancho de la ventana gráfica. Por otro parte, en pantallas más grandes, todas tendrán un ancho fijo (alrededor del 60% del ancho de la ventana).
  • El orden de su aparición dependerá del valor de su propiedad transition-delay.
  • Utilizaremos flexbox para distribuir el contenido de los elementos .top-menu y .mob-block.

Aquí hay una parte de los estilos requeridos para el menú fuera del lienzo:

Y el código JavaScriptque se necesita para abrirlo

Cerrar fuera del lienzo

Cada vez que hacemos clic en el botón ✕ (cerrar), .top-menu-wrapper perderá su clase show-offcanvas.

Justo en este momento, los elementos .panel y .top-menu desaparecerán con un efecto deslizante en un orden secuencial inverso. Primero desaparecerá .top-menu, y después de 100 ms .panel2, por último después de 300ms, .panel1.

Aquí están los estilos relacionados con la transición que determinan la velocidad de los elementos objetivo:

Y el código JavaScript que oculta el fuera del lienzo:

Alternar el formulario

Independientemente del ancho de la ventana gráfica, el formulario de búsqueda se ocultará al principio. También estará ubicada justo debajo de la barra de navegación.

Los estilos relevantes:

Mientras hagamos clic en el botón de búsqueda, el estado de visibilidad del formulario cambiará. Eso significa que si está oculto, aparecerá (recibirá la clase is-visible). Pero si ya tiene esta clase, desaparecerá.

The search form when it is visible

El código JavaScript que controla la visibilidad del formulario:

4. Estiliza el menú del escritorio

Cuando el ancho de la ventana gráfica sea de al menos 995 px, el diseño de la barra de navegación será completamente distinto:

The navbar layout on screens larger than 994px

En tal caso, un menú de navegación típico reemplazará al menú temporal fuera del lienzo.

Por lo tanto, vamos a destacar las diferencias importantes que ocurrirán en el diseño de escritorio en comparación con el diseño móvil:

  • Aparecerá el logo horizontal.
  • Por otra parte, los siguientes elementos desaparecerán: el pseudoelemento :: before de .top-menu-wrapper, el botón de conmutación de hamburguesa, el logotipo vertical, los .panels, .mob-block y los enlaces sociales .
  • Asimismo, .top-menu ya no se comportará como un elemento de posición fija, sino que se posicionará de acuerdo con su flujo normal de documento (position: static). Además, sus menús desplegables estarán ocultos de forma predeterminada y aparecerán únicamente cuando pasemos el mouse sobre su elemento de la lista principal correspondiente.

Aquí hay una parte de los estilos más cruciales para el diseño de escritorio:

Cuando el ancho de la ventana gráfica sea de al menos 1200 px, haremos algunos pequeños cambios. Quizá lo más importante, mostraremos el texto (Search Resources [Recursos de búsqueda ]) del botón de búsqueda:

The navbar layout on screens at least 1200px wide

El estilo que muestra el texto de búsqueda:

5. Borra las transiciones al cambiar el tamaño de la ventana

Casi hemos terminado la creación de nuestro menú. Pero hay una última cosa que tenemos que arreglar. Para ser más específicos, cada vez que cambiamos el tamaño de la ventana del navegador, debemos borrar todas las transiciones CSS. De otra manera, en nuestro caso, al cambiar el tamaño de la ventana, el menú fuera del lienzo aparecerá por un momento antes de volver a su posición predeterminada fuera de la pantalla.

Aunque no es algo muy importante, sería muy bueno si encontraramos una forma de resolver este problema.

Así que lo que podemos hacer es escuchar el evento resize, y cada vez que se active, añadiremos la clase no-transition (¡esperemos que lo recuerdes!) a todos los descendientes de .page-header.

Entonces, cuando finalice el cambio de tamaño, esperaremos 500ms (puedes cambiar ese valor) antes de eliminar esta clase de todos los descendientes .page-header.

Aquí está el pequeño código de JavaScript que logra esta funcionalidad:

No estoy seguro de que sea el enfoque más adecuado para resolver este problema, pero creo que al menos funciona bien y cancela las transiciones no deseadas al cambiar el tamaño de la ventana.

Evidentemente, podríamos mejorar este código para que se ejecute sólo para los pocos elementos que están en transición y no para todos los descendientes de la cabecera.

Conclusión

¡Eso es todo, amigos! Nos inspiramos en el menú de cabecera de la página web de Netflix Jobs y aprendimos a crear nuestro propio menú responsivo avanzado. De hecho, fue un largo viaje, espero que te haya ayudado a mejorar tus habilidades de front-end y que hayas aprendido algunas cosas nuevas.

Veamos nuevamente lo que hemos creado:

Antes de finalizar, me gustaría decir una cosa más: la mejor forma de entender cómo funciona esta demostración es inspeccionando los estilos CSS.

Si planeas crear algo similar a esto, me encantaría conocer tus ideas. Como siempre, ¡muchas gracias por leer!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.