Here is a constantly updated list of the 10 best JavaScript and CSS based mobile app-style off-canvas navigation menus we published on CSSScript.com. I hope you like it and don’t forget to spread the world.
Originally Published Nov 10 2017, updated Dec 10 2018
1. Touch side swipe
A Vanilla JavaScript plugin used to create a mobile-friendly off-canvas side menu that supports touch swipe events.
2. Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript
A pure JavaScript/CSS based hamburger navigation that allows you to toggle an off-screen sidebar menu when you click on the hamburger trigger.
3. Responsive Hamburger Menu In Pure CSS
This is a CSS only responsive, multi-level menu that expands the hamburger toggle button into a horizontal drop-down nav on the desktop or an off-canvas side menu on mobile.
4. CSS Only Hamburger Toggle Menu
A fancy CSS/CSS3 hamburger toggle navigation that allows the user to toggle an off-canvas side menu by clicking on the hamburger toggle button in the header.
5. mkgSideBar
mkgSideBar is a native JavaScript library that helps you create dynamic, flexible, mobile-friendly, smooth off-screen sidebar navigation/panels for your cross-platform web project. Supports unlimited menu levels.
6. offside
offside is a JavaScript library that uses CSS3 transforms to slide in an off-canvas menu while pushing the main page to the other side.
7. ApocSidebar
ApocSidebar is an ES 5/6 JavaScript sidebar component that allows to reveal off-screen sidebars with some cool animations based on CSS3. Ideal for mobile-friendly off-canvas navigation.
8. Drawerr.js
Drawerr.js is a JavaScript library that converts a nested html list into a mobile-friendly, off-canvas, multi-level drawer navigation for your cross-platform webpage.
9. CSS Only Off-canvas Navigation Using CSS Pseudo-class
A pure CSS, mobile-friendly off-canvas navigation system built using plain HTML/CSS/CSS3 and :focus-within CSS pseudo-class.
10. Canvi.js
Canvi.js is a standalone vanilla JavaScript used to create elegant, configurable, push and/or overlay off-canvas navigation for your cross-platform web application.