Pure CSS Off-screen Navigation Menu

Hamburger menu, drawer menu, off-canvas menu: Whatever you call it, hiding a website’s primary navigation just off screen is becoming a ubiquitous pattern in responsive web design. More and more sites feature a fixed-position icon that, when tapped, pushes the entire site to the side to reveal a hidden navigation menu.

While there are plenty of jQuery plugins that will create this effect for you, it’s actually pretty easy to achieve without using any JavaScript at all.

This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS.

via Pure CSS Off-screen Navigation Menu.