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