Top 10 JavaScript & CSS Mobile Navigation Of 2017

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

tiny-off-canvas-menu-with-javascript-and-css3

Demo Download

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

Pure CSS Fold Out Navigation Menu

Demo Download

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

Pure CSS Off-canvas Bootstrap Navigation

Demo Download

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

Creating An App Style Drawer Menu With Pure CSS CSS3

Demo Download

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

bpenDrawer

Demo Download

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

Demo Download

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

Pure CSS CSS3 Off-screen Side Navigation

Demo Download

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

off-canvas-push-menu-in-pure-html-css

Demo Download

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

html-css-only-off-canvas-slide-and-push-navigation

Demo Download

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

Demo Download

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

HTML And CSS Only Off-canvas Drawer Navigation

Demo Download

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

Demo Download

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.


Read More:

Top 50 Best Off-canvas Navigation jQuery Plugins