Construa Menus de Hamburger Deslizantes Acessíveis com Offcanvas
O livre Plugin Offcanvas é um dos muitos recursos para navegações deslizantes. Você pode encontrar um monte de plugins semelhantes on-line, mas Offcanvas se destaca por algumas razões.
É um biblioteca bastante leve e enquanto ele funciona no jQuery também é não é muito difícil de configurar. Isso vale tanto para o código JavaScripts quanto para o código HTML, portanto você não precisará alterar muito a navegação padrão.
O plugin Offcanvas permite que você designar certas áreas onde o menu deve aparecer. Por padrão, isso geralmente é o lado esquerdo ou direito da tela, mas você também pode escolher a parte superior ou inferior da tela, também.
Isso torna o Offcanvas excelente para Mais do que apenas deslizando menus de hambúrguer. Pode ser usado para barras de notificação deslizantes ou até mesmo campos de opt-in para capturar e-mails.
Cada painel funciona da mesma maneira onde o usuário pode clique em qualquer lugar da página para ocultar o menu deslizante. E você pode configurar comandos do teclado que funcionam em conformidade com as diretrizes da ARIA para acessibilidade adequada na Web.
Para obter o Offcanvas instalado, você só precisa uma cópia do jQuery juntamente com o Arquivos CSS / JS do Offcanvas. Você pode puxar através do npm, bower ou diretamente do GitHub.
Também na página do GitHub, você ver um pouco de código de amostra você pode retrabalhar para se adequar ao seu site. Tudo o que você precisa para a navegação deslizante é um elemento contendo seu menu (ou o que você quiser colocar na página).
Isto é acionado através de um link de âncora apontando para o ID do seu menu deslizante. Aqui está um trecho do Offcanvas GitHub que ilustra um breve exemplo:
… Cardápio …
Se você é capaz de refaça um pouco o HTML na sua página você não deve ter problemas para conseguir tudo isso.
o offcanvas ()
função ainda suporta opções para alterando a velocidade da animação, classe padrão, e funções de callback que pode ser executado após o menu abrir ou fechar.
Para saber mais e ver uma demonstração ao vivo, confira a página principal do plugin. Offcanvas é uma ótima opção para navegação alimentada por jQuery se você gosta de menus de hambúrguer.