10 Best Off-canvas Mobile Menus In jQuery/JavaScript/CSS (2019 Update)
What is Off-canvas Mobile Menu
Off-canvas Mobile Menu is a cross-platform navigation design concept for modern web & mobile design. It is now widely used on web and mobile applications.
The off-canvas navigation system enables the visitor to show/hide your site navigation in an elegant way, as you see on most mobile App.
The Best Off-canvas Mobile Menu
In this blog post you will find the 10 best Off-canvas Mobile Navigation Systems implemented in jQuery, Vanilla JavaScript and Pure CSS/CSS3. Have fun.
Not a jQuery user? View Top 10 Pure JavaScript & CSS Off-canvas Menus.
Originally Published Nov 12 2017, updated June 12 2019
Table of contents:
- jQuery Off-canvas Mobile Menu Plugins
- Vanilla Off-canvas Mobile Menu Libraries
- Pure CSS Off-canvas Mobile Menu Systems
jQuery Off-canvas Mobile Menu Plugins:
Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu
Mmenu is a super simple jQuery plugin for creating slick and app-like sliding menus for your mobile website,all with an unlimited amount of submenus.
jQuery & CSS3 Sliding Menu Using Navigation Drawer - Drawer
Drawer is a jQuery plugin for creating a responsive, touch-enabled and animated side menu that slides out from the edge of the screen when clicking or touching the trigger.
Responsive Sidebar Push Menu with jQuery and CSS3
A responsive off-canvas navigation system that uses CSS3 transition to smoothly slide out a sidebar push menu from the right hand side of the web page.
Mobile App-Style Toggle Menu/Sidebar Plugin For jQuery - Slidebars
Slidebars is a lite jQuery plugin that creates a responsive mobile app-style sidebar (side menu) sliding from left or right side or your web page/app when clicking the toggle link.
Simple Lightweight Off-canvas Menu Plugin - MA5 Mobile Menu
A simple, lightweight jQuery mobile navigation plugin allows you to create an off-canvas sidebar panel with a multi-level sliding drill down menu for your site navigation.
Vanilla JS Off-canvas Mobile Menu Libraries:
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).
Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe
A Vanilla JavaScript plugin used to create a mobile-friendly off-canvas side menu that supports touch swipe events.
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.
Pure CSS Off-canvas Mobile Menu Systems:
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.
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.
Conclusion:
Want more jQuery plugins or JavaScript libraries to create awesome Off-canvas Mobile Menus on the web & mobile? Check out the jQuery Off-canvas Menu and JavaScript/CSS Off-canvas Mobile Menu sections.