Bouw toegankelijke glijdende Hamburger-menu's met Offcanvas

De gratis Offcanvas-plug-in is een van de vele hulpmiddelen voor glijdende navigatie. Je vindt een hele reeks vergelijkbare plug-ins online, 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 in te stellen . Dit geldt voor zowel de JavaScript-code als de HTML-code, dus u hoeft uw standaardnavigatie helemaal niet te wijzigen.

Met de Offcanvas-plug-in kunt u bepaalde gebieden aangeven 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 het verschuiven van hamburgermenu's. Het kan worden gebruikt voor het verschuiven van meldingsbalken of zelfs opt-invelden om e-mails vast te leggen .

Elk paneel werkt op dezelfde manier waarop de gebruiker overal op de pagina kan klikken om het schuifmenu te verbergen . En u kunt toetsenbordopdrachten instellen die voldoen aan de ARIA-richtlijnen voor een goede webtoegankelijkheid.

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

Ook op de GitHub-pagina ziet u een beetje voorbeeldcode die u kunt aanpassen aan uw website. Alles wat je nodig hebt voor de glijdende nav is een