Build Accessible Sliding Hamburger Menus with Offcanvas
The free Offcanvas plugin is one of many resources for sliding navigations. You can find a bunch of similar plugins online but Offcanvas stands out for a few reasons.
The Offcanvas plugin lets you designate certain areas where the menu should appear. By default, this is usually the left or right side of the screen, but you can also choose the top or bottom of the screen, too.
This makes Offcanvas great for more than just sliding hamburger menus. It can be used for sliding notification bars or even opt-in fields to capture emails.
Each panel works the same way where the user can click anywhere on the page to hide the sliding menu. And, you can set up keyboard commands that run compliant with ARIA guidelines for proper web accessibility.
To get Offcanvas installed, you just need a copy of jQuery along with the Offcanvas CSS/JS files. You can pull these through npm, bower, or directly from GitHub.
Also on the GitHub page, you’ll see a bit of sample code you can rework to suit your website. All you need for the sliding nav is an <aside> element containing your menu (or whatever you want to slide onto the page).
This is triggered through an anchor link pointing towards the ID of your sliding menu. Here’s a snippet from the Offcanvas GitHub that illustrates a brief example: