Collection of hand-picked free HTML and CSS off-canvas menu code examples from codepen and other resources. Update of January 2019 collection. 7 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Off Canvas Menu
It quite simple to make a offcanvas menu, no JavaScript is needed.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Off-Canvas Menu
Pure CSS off-canvas menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript (Babel)
About the code
Off-Canvas Menu
Off-canvas menu with CSS and a touch of JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hidden Side Menu
Hidden side menu and hamburger animation using CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Pure CSS Slide Out Menu
A slide out menu that does not require JS to function properly - all handled by CSS and 100% functional.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Off-Canvas Menu
This example is a pure css off canvas menu demonstration made with CSS only. Not a single drop JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JavaScript
About the code
Off-Canvas Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Off-Canvas Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Sliding Panels and Off Canvas Navigation
Pure CSS3 HTML5 sliding panels and off canvas navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Off-Canvas Menu with Flexbox
Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Pure CSS Off-Screen Menu
This concept relies on the :checked pseudo-selector as well as the general sibling ~ selector, so it has decent browser support.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML
- CSS
About the code
Pure CSS Transition Effects For Off-Canvas Views
You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. - Thomas Wilthil
Links
Made with
- HTML / CSS (SCSS)
About a code
Off Canvas Menu Effect: Delayed Flip Out
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
iOS Style Sliding Menu
Here's an easy way to create an iOS style, side sliding menu.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
CSS3 Off-Canvas Panel with Menu
A CSS3 off-canvas panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -