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

Como Construir uma Navegação em Listra com Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Graças ao flexbox, hoje em dia podemos construir layouts bem modernos e atrativos facilmente. Nesse tutorial, veremos uma interface usada recentemente no Google National Parks, e também veremos como o flexbox pode ajudar a aprimorá-la.

Como sempre, antes de continuar, vejamos o que construiremos (talvez seja melhor ver a versão maior, já que o efeito completo aparece em áreas maiores que 800px):

Tenha certeza de passar o mouse sobre os links para ativar os efeitos.

O Código HTML

Primeiro, vejamos o HTML que usaremos para o layout. Definiremos um elemento div com cinco links dentro (podemos usar qualquer elemento que acharmos melhor) Cada um dos links contém uma div com a classe overlay. Abaixo, vemos a base do código:

Estilos CSS Iniciais

Com o HTML pronto, começamos a definir os estilos CSS básicos, especificamente:

  • Fazer da div mais externa um container flex e sua altura igual à da área de visualizaçaõ com height: 100vh.
  • Configurar a mesma largura para todos os links (itens flex). Para isso, daremos a cada um flex: 1. Além disso, todos os links terão uma imagem de fundo (do unsplash.com) que cobre toda a altura da área visivel. Como alternativa (caso a imagem não carregue), podemos especificar uma cor única de fundo para cada uma.
  • Ao passar o mouse sobre um link, seu tamanho triplica, relativo ao tamanho dos outros links. Fazemos isso alterando o valor da propriedade flex do link alvo. Felizmente, essa propriedade CSS é animável, permitindo gerar efeitos de transição suaves (pelo menos nos navegadors mais recentes).

Eis parte do código CSS demonstrando o que discutimos acima:

Até agora, se pré-visualizamos a demo num navegador que suporta flexbox, veremos esse resultado.

Estilizando a Sobreposição

O próximo passo é atribuir alguns estilos à sobreposição. Eis o que faremos:

  • Daremos à sobreposição as mesmas dimensões que o link pai. Obteremos isso posicionando-o absolutamente (relativo ao pai imediato) e especificando valores zero para as propriedades de posicionamento.
  • Definir a sobreposição como container flex. Assim, centralizaremos o parente direto (.overlay-inner) vertical e horizontalmente.
  • Adicionar plano de fundo cinza semi-transparent quando nós passamos o mouse sobre o link pai.

Eis os estilos CSS associados:

Sobreposição Interna

Agora, é hora de estilizar as partes internas da sobreposição. Por padrão, elas estão escondidas e aparecem apenas com o mouse sobre o link pai correspondente. Mas não de imediato, apenas após uma pequena espera. Essa espera é importante: se não a especificarmos, o efeito de transição sairá feio. Removamo-no e testemos a demo para entender melhor.

Para recapitular, primeiro o link fica grande e os elementos da sobreposição ficam visíveis. Também usamos translate3d() para criar efeito de slide. Por último mas não menos importante, usamos o hack transform-style: preserve-3d (ou algo similar) para evitar oscilações do efeito entre navegadores diferentes.

Eis os estilos CSS relacionados:

Vejamos o que obtemos.


Tornando Responsivo

A página está ótima em telas grandes, mas em pequenas ou mesmo médias, temos de fazer alguns ajustes. Por exemplo, eis algo que podemos fazer:

  • Virar o eixo principal do container flex adicionando flex-direction: column. Assim, os itens flex seguirão de cima para baixo.
  • Cancelar todas os efeitos de transição e mostrar os elementos da sobreposição por padrão.

Nossa consulta inicial, para desktop, será assim (usamos 800px porque ajusta às demos embutidas na publicação-mas podemos escolher o que parecer melhor):

Eis a aparÊncia final da nossa navegação:

Suporte de Navegadores

As demos funcionam nos navegadores que suportam flexbox.

Em alguns, talvez notemos que a animação da propriedade flex não é tão suave quanto deveria ou talvez nem funcione. Por exemplo, o IE11 não anima essa propriedade, enquanto o Edge sim. É compreensível, já que flexbox é um novo modo de layout que ainda está ganhando tração.

Conclusão

Nesse tutorial, aprimoramos nosso conhecimento sobre flexbox, aprendendo a construir uma layout de navegação estiloso. Espero que tenha curtido o que construímos e use como inspiração em outros projetos.

Se construir algum layout parecido, não deixe de compartilhar a abordagem usada (CSS puro ou JavaScript).

Por Aí...

Antes de encerrar, gostaríamos de compartilhar alguns sites que usam layout similar ao que acabamos de criar:

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.