Pure CSS3 Off Canvas Menu with jQuery Toggle

By April 20, 2016March 20th, 2017Blog, CSS, CSS3, Flexbox
Pure CSS3 Off-Canvas Menu

This is a simple concept of an off canvas, responsive CSS3 menu. It uses purely CSS, albeit some pretty modern features (transforms, flexbox) that aren’t compatible with older browsers.

This example uses an interesting technique with hidden checkboxes, labels, and adjacent HTML elements. The checkbox toggle method is an interesting method for toggling elements without using jQuery. You can read a more in-depth description of the method from my older post on a CSS-only multi-step form.

The Example On CodePen

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply