Bouw toegankelijke glijdende hamburger-menu's met offcanvas

Het gratis Offcanvas-plug-in is een van de vele bronnen voor glijdende navigatie. Je kunt een aantal soortgelijke plug-ins online vinden, maar Offcanvas onderscheidt zich om een ​​paar redenen.

Het is een vrij lichtgewicht bibliotheek en hoewel het op jQuery draait, is het ook niet erg moeilijk om op te zetten. Dit geldt voor zowel de JavaScript-code als de HTML-code, dus u hoeft uw standaardnavigatie helemaal niet te wijzigen.

Met de plug-in Offcanvas kunt u bepaalde gebieden aanwijzen waar het menu moet verschijnen. Standaard is dit meestal de linker- of rechterkant van het scherm, maar u kunt ook de boven- of onderkant van het scherm kiezen.

Dit maakt Offcanvas geweldig voor meer dan alleen hamburger menu's verschuiven. Het kan worden gebruikt voor schuifbalk voor kennisgeving of zelfs opt-in velden om e-mails te vangen.

Elk paneel werkt op dezelfde manier als de gebruiker dat kan klik ergens op de pagina om het schuifmenu te verbergen. En jij kan stel toetsenbordopdrachten in die voldoet aan de ARIA-richtlijnen voor een goede webtoegankelijkheid.

Om Offcanvas geïnstalleerd te krijgen, hoef je alleen maar een kopie van jQuery samen met de Offcanvas CSS / JS-bestanden. Je kunt deze door npm, bower of rechtstreeks vanuit GitHub slepen.

Ook op de GitHub-pagina zul je dat doen zie een beetje voorbeeldcode je kunt herwerken om bij je website te passen. Alles wat je nodig hebt voor de glijdende nav is een