Muitos designs de sites exigem um layout de cabeçalho diferente para telas de desktop e dispositivos móveis. Por exemplo, você pode precisar de um mega menu em telas de desktop e um menu fora da tela em telas de dispositivos móveis.
Neste tutorial, exploramos como realizar esse cenário usando o UIkit, uma estrutura de front-end que vale a pena ver e que abordamos bastante no passado.
Na verdade, este é um dos meus exercícios favoritos, pois descreve perfeitamente por que você pode querer usar uma estrutura de front-end e tirar proveito de seus recursos integrados, dependendo de suas necessidades de layout.
Aqui está a primeira variação do nosso menu de cabeçalho:
E o segundo:
A partir daqui, você pode ir ainda mais fundo e tornar os menus dinâmicos (ainda te devo um tutorial sobre como converter um dos menus em dinâmico através do WordPress!)
Você precisa de um menu móvel deslizante de vários níveis, mas não quer usar uma biblioteca JavaScript? Não tem problema, há um tutorial disponível apenas para este caso.
Aqui está nosso menu profundo de três níveis:
Nada o impede de tornar este menu dinâmico. Eu segui a mesma técnica muitas vezes para tornar dinâmicos menus semelhantes nos sites WordPress em que tenho trabalhado!
Adicionalmente, se você precisa oferecer suporte a um site antigo que usa uma versão herdada do jQuery e precisa de uma solução rápida para um menu off-canvas multinível, eu o cobri. Examine o seguinte menu deslizante que tira proveito de uma versão mais antiga do mmenu.js.
Inspirado no Site de empregos da Netflix, este tutorial aborda a criação de um menu responsivo avançado que leva a um menu fora da tela com animações impressionantes em telas móveis. Como bônus, também cuidamos da interface de pesquisa para deixá-la pronta para uso.
Continuando nossa jornada, aqui está um tutorial de Anna Monus que descreve minuciosamente as etapas para criar uma barra de navegação responsiva para dispositivos móveis com flexbox.
E se você prefere ver a criação do menu desde as bases, há uma versão completa em vídeo deste tutorial de Adi Purdila.
Este tutorial ensinará como criar outro menu de navegação responsivo fora da tela. Aqui, o off-canvas fica entre o menu fixo e a sobreposição do banner e aparece com uma animação deslizante.
Muitas variações criativas para esse efeito, especialmente se você considerar incluir alguns estilos para efeitos gráficos, como modos de mesclagem.
Seguindo em frente, desta vez estamos construindo um menu de painel de barra lateral responsivo. Nosso menu é flexível o suficiente para suportar um modo de painel claro/escuro, onde o selecionado persiste no carregamento da página graças ao armazenamento local.
Confira a demonstração (que foi vista mais de 30 mil vezes!) e dê um pouco de ❤️!
Vamos agora um pouco além da criação de um menu responsivo e examinar uma solicitação específica.
Este site estático construído com TailWind CSS passa pela criação de um menu responsivo mínimo e enfatiza como preservar seu estado ativo no carregamento da página.
Vamos explicar. Na primeira vez que visitamos o site, o menu estará oculto. No entanto, assim que o abrirmos e fecharmos o navegador, o menu permanecerá aberto até fechá-lo novamente. Mais uma vez, estamos aproveitando o armazenamento local.
Nada nos impede de criar menus responsivos animados baseados em rolagem.
Certifique-se de verificar todas as demonstrações desta lista e, especialmente, observe a seguinte e suas transformações dependendo do tamanho da tela.
Conclusão
Esta lista deve ter lhe dado inspiração suficiente para criar seus próprios menus responsivos! Aproveite as demonstrações, leia os tutoriais associados e, por último, mas não menos importante, certifique-se de siga Envato Tuts+ no CodePen para canetas mais criativas!
Como sempre, muito obrigado pela leitura!
