Vous êtes sur la page 1sur 7

CÓMO CREAR UNA NAVEGACIÓN OFF-CANVAS CON CSS GRID

CÓMO CREAR UNA NAVEGACIÓN OFF-CANVAS CON CSS GRID


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:

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.

Vous aimerez peut-être aussi