Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
O projeto está inativo

CSS Flex: Crie um menu de tela inteira com HTML e CSS​

Neste projeto veremos um menu feito em HTML e CSS que utiliza flexbox e principalmente sua propriedade flex-grow, além da propriedade filter, unidades de medida vh/vw e media query. Confira!

42

Usando as propriedades Flex-grow e Filter

Neste vídeo apresentamos um menu que utiliza as propriedades flex-grow e filter para proporcionar um efeito visual interessante à sua página: os itens do menu ocupam igualmente todo o espaço que definimos, com as imagens inicialmente em preto e branco. Assim que passamos o cursor sobre os itens eles aumentam de tamanho em relação aos outros e as imagens recuperam a cor original. Nas Figuras 1 e 2 conseguimos ver os detalhes do menu.

Menu em versão destop
Figura 1. Menu em versão desktop
Menu em versão mobile
Figura 2. Menu em versão mobile

Menu responsivo usando a propriedade Flex-grow

Como o menu é responsivo, utilizamos nele uma media query e também as unidades de medida “vh" e “vw”, que fazem o menu ter esse comportamento “full-screen”, ou seja, ocupando todo tamanho da tela.

Sugestão de conteúdo

Para aprofundar seus estudos, sugerimos que assista aos seguintes exemplos com tema relacionado:

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.