10 snippets de código CSS e JavaScript para criar navegações responsivas

Uma das partes mais complexas de um site bom e responsivo é a navegação. Isso pode demorar um pouco para descobrir, e há muitos tutoriais para ajudar com isso. Mas também sou fã de usar trechos de código como os que coletamos para este artigo.

Todos esses trechos de navegação responsivos são gratuitos para editar e clonar para seus próprios projetos. Eles também apresentam uma variedade de estilos, então haverá algo aqui que funcionará para todos os tipos de sites.

1. Layout de página inteira responsivo por Johnny Mango

Este exemplo responsivo mostra até onde você pode levar a fase de prototipagem de um site. Você notará que a navegação tem um recurso interessante ao passar o mouse e focar automaticamente nos links. Esse efeito pode ser alterado em um site “ao vivo” com a mesma navegação, mas é útil neste exemplo para mostrar a UI/UX da página.

Veja a demonstração de navegação responsiva à caneta com Kube por Johnny Mango

2. Barra de navegação suspensa por Tania Rascia

Se você precisar de itens suspensos mais longos em sua navegação, esse menu pode funcionar melhor. É uma forte alternativa às navegações mais básicas que apresentam apenas alguns itens de menu. Nesse caso, você encontrará uma lista simples de links com um menu suspenso muito pequeno. Os links do submenu aparecem apenas em um evento de clique que é tratado pelo jQuery. Você pode alterar isso para somente CSS, mas perderá o acionador de clique.

Ainda assim, para um design tão limpo, estou surpreso com a versatilidade que esse trecho oferece aos desenvolvedores.

Veja a barra de navegação suspensa responsiva à caneta por Tania Rascia

3. Layout de página única por Jan Czizikow

Os menus de navegação de página única precisam de amor como qualquer outro. Este é um exemplo perfeito de navegação de página única em ação. Os links rolam para baixo com uma animação suave, mas não o deixam esperando por muito tempo.

Sem mencionar que eles são redimensionados automaticamente para o ajuste perfeito, independentemente do tamanho do seu navegador. Eu recomendaria principalmente esse tipo de navegação para uma página de vendas ou um site de portfólio simples. É limpo e apresenta alguns excelentes recursos de animação ao lado das técnicas responsivas.

Veja a Caneta Navegação totalmente responsiva com animações CSS e jQuery por Jan Czizikow

4. Menu suspenso vermelho por Stephanie Walter

A desenvolvedora Stephanie Walter construiu alguns projetos interessantes para a web. Este snippet é apenas um exemplo com uma navegação responsiva em vermelho brilhante.

Os links têm um pouco mais de toque especial com um recurso selecionado personalizado e um bom efeito de foco para inicializar. Quando redimensionado, você notará que a navegação usa um menu suspenso deslizante. Eu quase optaria por uma lista de links em nível de bloco para celular, mas isso funciona muito melhor considerando o submenu.

Veja a navegação multinível responsiva à caneta de Stephanie Walter

5. Design CSS puro por Ahmad Hjazy

Aqui está um design exclusivo usando CSS puro para a navegação. É um menu vertical com links de navegação que imitam a tabela periódica dos elementos.

Os efeitos do hover estão um pouco atrasados, mas sem dúvida interessantes. Sem mencionar que o estilo responsivo é surpreendentemente utilizável. Talvez a parte mais impressionante seja como todo este exemplo usa apenas CSS .

Veja o menu de navegação responsivo CSS da caneta por Ahmad Hjazy

6. Cabeçalho pegajoso responsivo por Marc Libunao

Mencionei o design de página única em um trecho anterior, e esse cabeçalho responsivo segue uma trajetória semelhante. A única diferença é que essa navegação tem um bloco um pouco maior na página e lida com o design de página responsivo de maneira um pouco diferente.

Ao redimensionar o navegador, você notará que este exemplo usa o ícone de hambúrguer com uma animação divertida. É bom considerando o estilo, mas pode não ser todo mundo.

Veja a navegação do cabeçalho responsivo à caneta por MarcLibunao

7. Responsivo e amigável ao toque da Dragoeco

Todos os bons sites devem ser sensíveis ao toque por padrão, e é isso que torna essa navegação ainda mais atraente para os designers.

Cada link leva a uma nova página, mas você pode tocar para passar os menus suspensos com facilidade em qualquer dispositivo baseado em toque. Esse recurso geralmente está ausente nos menus de navegação e é um dos motivos pelos quais os menus suspensos podem ser difíceis de projetar.

Veja a navegação suspensa da caneta: responsiva e amigável ao toque da Dragoeco

8. Links de navegação simples por AnabolicHippo

Quando penso em menus de navegação simples, penso em um design como este. Cada link aparece como seu próprio elemento de bloco, mesmo em telas menores. Não há menu de hambúrguer e nenhum recurso de menu animado oculto. Em vez disso, os links são redimensionados e divididos em linhas separadas.

A parte mais complicada é lidar com o efeito suspenso em dispositivos móveis. Muitos dos links têm submenus e funcionam da mesma forma em telas menores.

Eu diria que isso funciona melhor para sites com pouco ou nenhum submenu, mas vale a pena tentar no celular para ver o que você acha da experiência.

Veja o menu de navegação responsivo à caneta do AnabolicHippo

9. Menu de cortina do Playstation por Louis Chenais

O desenvolvedor Louis Chenais criou uma das minhas navegações responsivas favoritas com base no site do PlayStation. Louis chama isso de “menu cortina” onde ele desliza para a vista, ultrapassando a página inteira. Isso é comum para interfaces móveis e rapidamente se tornou popular também para web designers.

Uma coisa que eu realmente gosto é o estilo de animação. É elegante e rápido o suficiente para exibir os links sem deixar os usuários entediados. E o melhor de tudo, parece que poderia funcionar em um site de produção.

Veja o Princípio de Navegação Responsiva à Caneta nº 3 – O Menu Cortina por Louis Chenais

10. Mega-Menu responsivo por Samir Alley

Você pode pesquisar na web e encontrar centenas de exemplos de mega menus de navegação. Eles geralmente aparecem em blogs e sites de notícias maiores, mas também são populares em lojas de comércio eletrônico ou sites de grandes agências. A parte mais difícil de um mega-menu é torná-lo totalmente responsivo. Graças a este pequeno trecho, você pode retrabalhar o design do mega menu para caber em qualquer tela com facilidade.

No celular, ele usa uma navegação deslizante para exibir todos os links internos em um menu. Isso pode parecer um pouco chato, mas você também pode usar jQuery para ocultar os sublinks se isso fizer sentido. Ainda é uma das melhores soluções responsivas que já vi para executar um mega menu no desktop sem alienar os usuários móveis.

Veja o Mega Menu responsivo à caneta – Navegação por Samir Alley