Advertisement
  1. Web Design
  2. CSS Grid Layout

Cómo Crear una Navegación Off-Canvas con CSS Grid

by
Read Time:6 minsLanguages:

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

El patrón off-canvas es una solución clásica para la navegación en sitios responsivos. Cuando la ventana de visualización es suficientemente pequeña para garantizarlo, la navegación voluminosa se oculta "off-canvas" y solo se muestra cuando la activas nuevamente.

Hoy vamos a crear una navegación off-canvas usando CSS para conseguir el cambio (sin requerir JavaScript) y nuestro buen amigo Grid para construir la estructura de la página. Aquí tienes la página de muestra completa de lo que vamos a estar intentando conseguir.

La Estructura de Página Básica

Empecemos construyendo una página básica; estamos buscando algo como esto:

Semantic page structure
Estructura semántica de la página

Esta es una estructura de página semántica típica; verás que todo se mantiene en una sola columna para los viewports pequeños, después los laterales reaparecen en las pantallas más grandes. El elemento <nav> está destacado en azul para aportar más claridad.

Aquí está la estructura de nuestro código: 

Ahora, añadamos algunos estilos visuales y algunas reglas Grid.

Convirtiéndolo un poquito Griddy

Comienza envolviendo todos tus elementos estructurales en un elemento contenedor de algún tipo–éste será nuestro contenedor para Grid. Yo estoy usando <div class="container"></div>.

Ahora añade algunos estilos grid básicos:

Aquí estamos declarando que el contenedor debería ser display:grid;, que debería tener una sola columna de una unidad fraccionaria (no estrictamente necesario en este momento, pero lo hemos añadido para ser rigurosos) y que el espacio entre todos los elementos de la retícula debe ser 10px.

Después añade un par de estilos visuales para aclarar las cosas un poco más:

Hacerla Responsiva

Añadamos una media query, de forma que cuando la ventana o pantalla alcancen cierta medida (nosotros vamos a indicar 600px) la maquetación cambie.

Así que ahora, en las pantallas grandes, la retícula cambia a grid-template-columns: repeat(4, 1fr);. Esto nos da como resultado cuatro columnas de igual anchura, así que después tendremos que indicar la anchura de cada uno de nuestros elementos estructurales. El header, nav y footer se extenderán todos 4 (a través de cuatro columnas) mientras que la section se extenderá a través de tres, dejando un espacio de una columna para el aside cuya anchura se adaptará automáticamente. 

Por último, algunos estilos para modificar el aspecto de la navegación: 

Esto es lo que tenemos hasta ahora:

Aventurarse Fuera del Lienzo (Off-Canvas)

Este es un ejemplo perfecto sobre como el posicionamiento a través de CSS puede funcionar todavía con elementos estructurales, incluso dentro de una Retícula declarada. Vamos a coger nuestra navegación, eliminarla del flujo del resto del documento y ubicarla fuera del lienzo. Los otros elementos de la retícula se situarán en su lugar perfectamente.

Empecemos con otra media query. Todavía tenemos nuestra query min-witdh, pero esta vez sólo queremos aplicar estilo a los elementos hasta una max-width. Hasta que nuestro alcanza ese mágico 600px en el que deseamos posicionar la navegación fuera del lienzo.

Le hemos asignado a la navegación una anchura fija, posicionándola a la izquierda lo suficiente como para ocultarla completamente. Hemos usado la posición fixed también, así que puedes usar además absolute dependiendo de si quieres que la navegación se deslice con la ventana o no.

También habrás advertido la regla transition, que tendrá efecto una vez creados alguno controles para realizar los cambios.

Alternar

Habiendo hecho desaparecer nuestra navegación, ahora necesitamos algunos controles para traerla de vuelta cuando la necesitemos. Añadamos un enlace para desencadenarla y otro para cerrarla nuevamente.

Añade esto en el header:

y esto a la navegación:

No necesitamos que el enlace de apertura esté visible en las pantallas grandes, así que ocultamos los elementos con la clase .toggle dentro de nuestra media query min-width:

:target

Lo importante en los enlaces de arriba es la presencia de un "fragmento identificador" (el #nav en href). Estos identificadores los usan los navegadores para dirigirse directamente a elementos específicos en una página.  En este caso, estamos dirigiéndonos a cualquier elemento que contenga el id "nav", y una vez haya sido localizado le podemos aplicar estilo mediante la pseudo clase :target. ¡Sin necesidad de JavaScript!

Añade lo siguiente a nuestra media query max-width:

¡Esto es todo! Este es nuestro alternador.

Esto es lo que tenemos ahora:

Necesitarás echar un vistazo a la muestra de página completa para apreciar al completo lo que estamos haciendo.

Conclusión

¡Y ya lo tenemos! Hemos aplicado estilo de forma mínima de para no salirnos del camino, pero siéntete libre y dale exactamente la apariencia que deseas.

Podrías preferir un alternador con JavaScript, en lugar de usar :target, en cuyo caso tendrás todas las piezas en su sitio para que funcione igualmente.

¡Espero que hayas disfrutado de este pequeño ejercicio con la Retícula, manténte atento a lo que está por venir!

Recursos Útiles

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.