CSS Off Canvas Menu

A pure CSS off-canvas navigation menu solution for desktop and mobile. Very much a work in progress.

Hello world! Although this isn't quite ready to share yet, i'm putting this on GitHub to track changes and quickly sync between workstations, and intend to release this under an open source license once I have something that's both workable and easily implementable.

My current code for this project is also integrated in a demo page which will help me see how this will work in the real world. Once everything is working properly, it will be spun into a demo page, and the menu itself will be packaged independently.

Goals

• Pure CSS menu
• Appealing design and transitions based off Material Design
• Implement Responsive breakpoints for common screen widths
  • Responsive 'always out' menu for wider screens
  • Mobile friendly implementation for smaller screens
• Quick customization with LESS or SASS (why not Zoidburg both?)
• Zero JavaScript

Notes

Placeholder images used in my demo site (used while building the menu) are from Unsplash, and implemented using Unsplash.it. Icons are Font Awesome.

Based on (and inspired by) "Pure CSS Off Canvas Navigation Menu" tutorial from Andor Nagy

This is my first public project on GitHub, so be gentle.

^_^