Construindo uma Navegação Off-Canvas Com Grade do CSS

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

O padrão off-canvas é uma abordagem clássica para navegação responsiva. Quando a área de visualização é pequena suficiente para usá-la, toda a navegação é escondida "fora" e apenas mostrada quando pedido.

Hoje, construiremos uma navegação off-canvas, usando CSS para a alternação (sem JavaScript) e nossa amiga Grade para criar a estrutura da página. Eis a demo completa da página que criaremos.

Estrutura Básica da Página

Comecemos criando a página básica, onde buscamos algo assim:

Semantic page structure — Estrutura semântica da página

É uma estrutura semântica de página bem típica. Veremos que tudo se empilha em uma únic coluna em áreas de visualização pequenas e, então, ajusta-se em áreas maiores. O elemento <nav> está em azul por clareza.

Eis a marcação:

<header role="banner">
    <h1>Header</h1>
</header>
  
<nav id="nav" role="navigation">    
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
    </ul>
</nav>
  
<section role="main">
    <article>
        <h2>Article</h2>
        <p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p> 
        <p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>
        <p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
    </article>
</section>
  
<aside>
    <h3>Aside</h3>
</aside>
  
<footer>
    <h3>Footer</h3>
</footer>

Agora, adicionemos alguns estilos visuais e regras de Grade.

Usando as Grades

Comecemos envolvendo nossos elementos estruturais em um elemento recipiente–ele será o container da nossa Grade. Usaremos <div class="container"></div>.

Agora, adicionemos estilos básicos de grade:

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

Aqui, declaramos que o container deve ter display: grid;, que deve ter uma única coluna de uma única unidade fracional (não estritamente necessário agora, mas adicionamos por robustez), e que o espaçamento entre os itens da grade deve ser 10px.

Depois, mais elementos visuais para deixar mais conciso:

.container > * {
  color: #353535;
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px;
  background: #d0cfc5;
}

.container nav {
  background: #136fd2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: #d0cfc5
}

nav a:hover {
  text-decoration: none;
}

Tornando Responsivo

Adicionemos uma consulta de mídia para quando a área de visualização tiver certo tamanho (ex: 600px) o layout mude:

@media only screen and (min-width: 600px) {
    
  /* grid */
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* specific item styles */

  .container header,
  .container nav,
  .container footer {
    grid-column: span 4;
  }
  .container section {
    grid-column: span 3;
  }
  
}

Agora, em telas grandes, a declaração da grade será grid-template-columns: repeat(4, 1fr);. Isso dá quatro colunas de mesma largura, então precisamos declarar o quão largo os elementos estruturais serão. O header, nav e footer tomarão 4 espaços (4 colunas) enquanto section tomará apenas 3, deixando o espaço de uma coluna para o aside preencher automaticamente.

Por fim, alguns estilos para alterar o visual da navegação:

  /* nav styles */
  nav ul li {
    display: inline-block;
    padding: 0 20px 0 0;
  }

Eis o que temos até agora:

Aventurando-se no Off-Canvas

Eis um exemplo perfeito do posicionamento do CSS que funciona em elementos estruturais mesmo numa Grade. Pegaremos a nav, removermo-na do fluxo do documento e a colocaremos fora. Os outros itens da grade ocuparão o resto sem problemas.

Comecemos com outra consulta de mídia. Já temos a min-width mas, dessa vez, só queremos estilizar elementos até max-width. Até agora, nossa área alcança os 600px mágicos que queremos a nav posicionada fora.

@media only screen and (max-width: 599px) {
  
    #nav {
        position: fixed; /* or choose `absolute` depending on desired behavior*/
        top: 0;
        bottom: 0;
        width: 300px;
        left: -340px;
        transition: left .3s ease-in-out;
    }
  
}

Demos uma largura fixa à nav, posicionando-a suficientemente à esquerda para escondê-la. Usamos position: fixed; também embora possamos usar absolute, dependendo se queremos que ela role com a janela ou não.

Também percebamos a regra transitions que entrará em efeito ao criar os controles de alternação.

Alternando

Tendo feito a nav desaparecer, precisamos de controles pra fazê-la aparecer quando preciso. Adicionemos um link ativador e um fechador.

Adicionemos isso ao cabeçalho:

1	<a class="toggle open" href="#nav">open</a>

E isso à nav:

1	<a class="toggle close" href="#">close</a>
2	<!-- you might also want to use a “×” -->

Não precisamos do link ativador visível em áreas maiores, então esconderemos elementos .toggle na consulta min-width:

1	.toggle {
2	display: none;
3	}

:target

O importante dos links acima é a presença de um "identificador de fragmento" (o #nav no href). Eles são usados pelo navegador para navegar diretamente a elementos específicos na página. Nesse caso, miramos qualquer elemento que case com o id "nav" e uma vez focado, podemos estilizá-lo usando a pseudo-classe :target. Sem JavaScript!

Adicionemos o seguinte à consulta de mídia max-width:

1	#nav:target {
2	left: 0;
3	}

É isso! É o nosso alternador.

Eis o que temos, agora:

É preciso ver a página inteira da demo para apreciar completamente o que foi feito.

Conclusão

E terminamos! Criamos o mínimo de estilos para não atrapalhar, mas somos livres para deixar exatamente como quisermos.

Também podemos usar um alternador JavaScript ao invés do :target e, para esse caso, tudo já está no lugar para caso queiramos usá-lo.

Esperamos que tenham curtido esse pequeno exercício de Grade e fiquem de olho para mais!

Recursos Úteis

Série Entendendo o Layout em Grade do CSS na Tuts+
Examinando Navegação Responsiva: Padrões Off-Canvas, por Steven Bradley
Inscreva-se no csslayout.news