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.
10. Tiny Off-canvas Menu with JavaScript and CSS3
A mobile-friendly off-canvas push menu with a hamburger toggle button built using CSS3 and a little JavaScript magic.
9. Pure CSS Fold Out Navigation Menu
AN HTML / CSS only navigation system that uses :checked selector to toggle an off-screen menu with a hamburger button.
8. Pure CSS Off-canvas Bootstrap Navigation
A CSS extension for Bootstrap that lets you create an off-canvas navigation menu for your web project.
7. Creating An App Style Drawer Menu With Pure CSS/CSS3
A cool mobile App style navigation that reveals a familiar off-canvas menu and pushes the main content to the right. Written with pure CSS/CSS3.
6. Pure JavaScript/CSS Sliding Drawer Menu – bpenDrawer
A pure JS/CSS based mobile drawer menu that slides out from the edge of your screen when toggled on, similar to the off-canvas navigation menu you seen on some mobile apps.
5. Pure CSS Sidebar Toggle Menu – Sidekick
Sidekick is a pure HTML / CSS based off-screen sidebar menu for your mobile site navigation. Click on the toggle menu you will see a sidebar navigation slides out from the left side of the screen while pushing the main page to the right.
4. Pure CSS/CSS3 Off-screen Side Navigation
Leps Slider is a simple-to-use JavaScript slideshow plugin for creating a responsive, fullscreen, carousel-style, fully configurable content slider that supports all CSS3 animations.
3. Off-canvas Push Menu In Pure HTML / CSS
A pure Html / CSS solution used to create an App style off-canvas push menu for site navigation using CSS3 :target selector.
2. HTML / CSS Only Off-canvas Slide and Push Navigation
A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html.
1. Responsive Sidebar Navigation with JavaScript and CSS3
Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects. On small screens, it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport’s size reaches the breakpoint specified in the CSS3 media queries (default to 992px).
Bonus! Recommended Off-canvas Menus:
HTML And CSS Only Off-canvas Drawer Navigation
Just another responsive off-canvas drawer navigation built on top of CSS, CSS3 and checkbox element.
Elegant Off-canvas Navigation In Vanilla JavaScript – 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.