Criar menu de navegação responsivo mais inteligente com este plugin jQuery
Todo site moderno precisa de layout responsivo e um navegação utilizável. Isso é um dado.
Mas, menus de hambúrguer só podem ir tão longe e eles mudar radicalmente a usabilidade para tamanhos de tela variados. A melhor maneira de lidar com isso é escondendo progressivamente os links com um plugin como OkNav.
Este plugin jQuery livre adiciona um recurso de menu muito simples para qualquer página e éhumilde esconde itens de navegação, com base em diferentes viewports. Desta forma, os usuários de smartphones têm um único menu de hambúrguer, mas os usuários de tablets também podem ver alguns links.
Por padrão, ele depende de um elemento e um lista não ordenada longa. Até agora, eu não acho que este plugin suporta dropdowns multi-nível, mas se você conhece um pouco de jQuery você pode adicionar isso mesmo.
OkayNav é extremamente simples e é significava para sites mais simples que só tem um punhado de links de navegação. Esses links se esconda lentamente atrás de um menu fora da tela uma vez que eles atingiram uma certa viewport e mais links continuam escondendo quanto menor o navegador fica.
Você precisará Enrole sua lista não ordenada em um elemento de navegação e forneça um ID específico. Então você pode segmentar todo o nav com o okayNav () função como esta:
var navigation = $ ('# nav-main'). okayNav (); Note que este é apenas o configuração mais simples sem recursos personalizados. Você pode trabalhar com mais de uma dúzia de opções personalizadas embutido nesta biblioteca para controlar o estilo de ícone, a animação de menu, o suporte de furto e as funções de retorno de chamada.
E você pode até chamar o menu para abrir / fechar à vontade passando valores específicos para a função. Aqui está um exemplo simples para abra a navegação:
navigation.okayNav ('openInvisibleNav'); Todos esses códigos estão bem documentados no Repositório GitHub que também inclui um download do script. Se preferir a rota CDN, você também pode usar o Link RawGit para adicionar este script diretamente do GitHub.
OkayNav é ótimo para sites menores que se beneficiam da técnica de navegação progressiva. Mas, se você ainda não tem certeza de como isso funciona, confira esta demo no CodePen mostrando o que este pequeno plugin pode fazer.
