Construire des menus de Hamburger coulissant accessibles avec Offcanvas

Le plugin Offcanvas gratuit est l'une des nombreuses ressources pour les navigations glissantes. Vous pouvez trouver un tas de plugins similaires en ligne, mais Offcanvas se distingue pour quelques raisons.

C'est une bibliothèque assez légère et bien qu'elle fonctionne sur jQuery, elle n'est pas très difficile à configurer . Cela est vrai pour le code JavaScripts et le code HTML, vous n'aurez donc pas besoin de modifier votre navigation par défaut.

Le plugin Offcanvas vous permet de désigner certaines zones où le menu devrait apparaître . Par défaut, il s'agit généralement du côté gauche ou droit de l'écran, mais vous pouvez également choisir le haut ou le bas de l'écran.

Cela rend Offcanvas génial pour plus que de faire glisser des menus hamburger. Il peut être utilisé pour faire glisser des barres de notification ou même des champs d'inscription pour capturer des courriels .

Chaque panneau fonctionne de la même manière où l'utilisateur peut cliquer n'importe où sur la page pour masquer le menu coulissant . De plus, vous pouvez configurer des commandes de clavier conformes aux directives ARIA pour une bonne accessibilité Web.

Pour installer Offcanvas, vous avez juste besoin d' une copie de jQuery avec les fichiers Offcanvas CSS / JS . Vous pouvez les tirer via npm, bower ou directement depuis GitHub.

Aussi sur la page GitHub, vous verrez un peu d'exemple de code que vous pouvez retravailler en fonction de votre site web. Tout ce dont vous avez besoin pour la navigation coulissante est un