Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

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

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (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:

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:

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:

Tornando Responsivo

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

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:

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.

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:

E isso à nav:

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

: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:

É 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

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.