Existem muitas técnicas para implementar menus de navegação responsivos em seu site. Uma de suas opções: Construa seu cardápio do zero. Existem muitos tutoriais na Web para isso, se você precisar aprender.
Mas alguns de nós podem estar apenas interessados em realizar a tarefa o mais rápido e indolor possível. Nesse caso, você pode usar código-fonte aberto. Neste post, discutirei alguns excelentes projetos de código aberto para a construção de menus de navegação responsivos.
Existem muitas opções por aí, então, por conveniência, reduzi para apenas 8. No final do post, você encontrará uma tabela de resumo com links para o site oficial, demos, guia de uso e código aberto oficial repositório para cada projeto sobre o qual falarei.
1. Navegação responsiva
Este sistema de menu de navegação responsivo é leve, menos de 1 KB quando otimizado. O Responsive Nav não possui dependências externas, o que significa que você não precisa incluir uma biblioteca JS como jQuery para funcionar.
2. Bootstrap Navs e Navbar
Bootstrap tem dois componentes para construir menus responsivos. Eles são chamados de Navs e Navbar . Se você precisa apenas de um menu responsivo, você deve personalizar sua compilação do Bootstrap para incluir apenas arquivos relacionados a Navs e/ou Navbar.
3. objetivo do menu
Este plugin jQuery permitirá que você crie menus suspensos mega responsivos modelados de acordo com os menus rápidos e responsivos da Amazon.com. Isso é ótimo para sites com muito conteúdo. Leia sobre a gênese deste plugin nesta postagem do blog .
4. Sidr
Sidr é um plugin jQuery para criar aqueles menus deslizantes verticais que você costuma ver em sites responsivos e aplicativos móveis como o Facebook.
5. FlexNav
O FlexNav foi criado com uma abordagem Mobile First. Tem um bom suporte ao navegador: Por exemplo, o IE7 é suportado. FlexNav é dependente de jQuery.
6. TinyNav.js
Se você simplesmente deseja alterar de forma responsiva suas listas HTML não ordenadas/ordenadas para menus suspensos HTML quando visualizadas em dispositivos móveis, confira a primeira versão do Responsive Nav (discutida acima) chamada TinyNav.js. Há também um fork independente do jQuery do TinyNav.js chamado SelectNav.js .
7. Insistente
Pushy permite que você crie um menu de gaveta deslizante responsivo e compatível com dispositivos móveis. Requer jQuery e Modernizr para suportar navegadores antigos como IE7 a IE9.
8. SlickNav O SlickNav é um sistema de navegação de menu responsivo robusto que possui várias opções. É adequado em sites e aplicativos com muitos links e subcategorias. A filosofia de desenvolvimento também enfatiza a acessibilidade da Web: SlickNav é compatível com ARIA.
