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.
Before we get started, I’d like to make a note that using this method for creating the drawer menu means your site’s navigation will always be in a drawer, regardless of viewport size. If you only want the drawer menu on smaller screens, you’ll have to use some JavaScript to manipulate the DOM order or use some funky CSS to make the menu look right on larger screens. In other words: It’s pretty and simple, but it’s not always the right solution for every situation.
Here’s a CodePen demo showing the end result:
See the Pen Pure CSS Off-Screen Navigation Menu by SitePoint (@SitePoint) on CodePen.
Start with Some HTML
The markup for our off-canvas menu is a bit different than your standard navigation menu. Instead of sticking it in the site’s header, we’re going to start right inside the <body> tag.
This is the basic structure:
[code language=”html”]
[/code]
You can see our site’s markup is made up of three main elements: the navigation, a checkbox and label pair, and the site’s actual content.
A few things to note:
- The navigation section is first in the source order because it’s “behind” everything else on the site. You can use whatever HTML tags you want to build the navigation. Here I’m using an unordered list, which is common.
- The trigger to slide out our menu is a checkbox input with a label. Typically the label would come before the input or wrap around the input. In this case, the input has to come directly before the label. We’ll see why later when we add the CSS.
- The rest of our site has to be wrapped in a unique div. This is so that when we open the menu, everything else can slide slightly off-screen to reveal the hidden navigation elements underneath.
Now that we’ve got our basic HTML structure, we can start making it look pretty!
Continue reading %Pure CSS Off-screen Navigation Menu%
View full post on SitePoint