Motivação

Com o número cada vez maior de usuários que utilizam dispositivos móveis para navegar na internet, o recurso de responsividade é fundamental para garantir a boa experiência do usuário, que deve ser capaz de acessar adequadamente o conteúdo da página, independentemente das dimensões do seu dispositivo.

O framework Materialize, semelhante ao Bootstrap, traz diversos recursos para otimizar essa característica nas páginas. Nesse artigo, vamos nos concentrar em como criar um menu responsivo utilizando o componente navbar, por meio do qual poderemos exibir para o usuário um menu lateral quando a página for acessada em telas pequenas.

Estrutura básica da página

O primeiro passo para que possamos utilizar o Materialize é importar os arquivos de CSS e JavaScript necessários, adicionando-os na página HTML. Na Listagem 1, temos um exemplo de como deve ser a estrutura inicial de uma página para suportar os recursos do Materialize.

Fim do trecho gratuito • continue abaixo
CONTEÚDO EXCLUSIVO

Desbloqueie toda a DevMedia

  • +2000 artigos e vídeos
  • +40 trilhas sobre Front-end, Back-end, IA e muito mais
  • +5000 exercícios práticos
  • Mentorias ao vivo individuais
até 50% OFF
A partir de
R$ 79 /mês
Assinar agora