Pure Css Off Canvas Menu

2.07.2020

It quite simple to make a offcanvas menu, no JavaScript is needed.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderPure Css Off Canvas Menu

Off-Canvas Menu

22.03.2019

Pure CSS off-canvas menu.

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderOff-Canvas Menu

Off-Canvas Menu

22.01.2018

Off-canvas menu with CSS and a touch of JavaScript.

Made with: HTML,CSS,JavaScript (Babel)

View Code

Off-Canvas Menu

Hidden Side Menu

29.06.2017

Hidden side menu and hamburger animation using CSS only.

Made with: HTML,CSS (SCSS)

View Code

Hidden Side Menu

Pure Css Slide Out Menu

23.05.2017

A slide out menu that does not require JS to function properly - all handled by CSS and 100% functional.

Made with: HTML,CSS

View Code

Pure Css Slide Out Menu

Pure Css Off-Canvas Menu

19.12.2016

This example is a pure css off canvas menu demonstration made with CSS only. Not a single drop JavaScript.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderPure Css Off-Canvas Menu

Off-Canvas Menu

23.06.2016

Made with: HTML,CSS,JavaScript

View Code

Off-Canvas Menu

Off-Canvas Menu

12.06.2015

Made with: HTML,CSS

View Code

PlaceholderOff-Canvas Menu

Sliding Panels And Off Canvas Navigation

29.10.2014

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Made with: HTML,CSS (SCSS)

View Code

Sliding Panels And Off Canvas Navigation

Pure Css Off-Canvas Menu With Flexbox

1.10.2014

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.

Made with: HTML,CSS (SCSS)

View Code

Pure Css Off-Canvas Menu With Flexbox

Pure Css Off-Screen Menu

31.07.2014

This concept relies on the :checked pseudo-selector as well as the general sibling ~ selector, so it has decent browser support.

Made with: HTML,CSS

View Code

Pure Css Off-Screen Menu

Pure Css Transition Effects For Off-Canvas Views

3.07.2014

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

Made with: HTML

View Code

Pure Css Transition Effects For Off-Canvas Views

Off Canvas Menu Effect: Delayed Flip Out

24.01.2014

Made with: HTML,CSS (SCSS)

View Code

PlaceholderOff Canvas Menu Effect: Delayed Flip Out

Ios Style Sliding Menu

12.07.2013

Here's an easy way to create an iOS style, side sliding menu.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Ios Style Sliding Menu

Css3 Off-Canvas Panel With Menu

20.06.2013

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.

Made with: HTML,CSS,JavaScript

View Code

Css3 Off-Canvas Panel With Menu