Off Canvas Menu with CSS :target

"Off Canvas" patterns are different ways to approach layout where content on the web isn't just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the "canvas" (visible browser window) and slid in on demand. Anthony Colangelo created jPanelMenu to do just that. Hakim El Hattab's Meny is fancier but similar in what it accomplishes.

They both use JavaScript. I thought it would be fun to try and recreate Anthony's jPanelMenu using only CSS. It's do-able - with several advantages and disadvantages.

Two Columns, One Collapsed

The layout technique here is essentially a two column grid. Only the left column is 0% wide and the right column is 100% wide by default. The left column is the navigation we intend to reveal as needed. With hidden overflow, this column is completely hidden.

We could leave it at that, and the menu would overlap the content (make sure it has a higher z-index). That would be perfectly fine. But we do have options. We could "push" the content off the right edge of the content instead. That's what, for example, Facebook does in their mobile app when the left menu is revealed. Or we could squish up the main content making a 20%/80% grid. That's what we'll do here.

But wait... how do we select the .page-wrap only in the particular state when the menu is open? We can use an adjacent sibling combinator!

#main-nav:target + .page-wrap {
width: 80%;
}

It's that easy.

To close the menu, we just need to remove the hash-link in the URL. Essentially, provide an link like this anywhere:

<a href="#">Close Menu</a>

If you wanted to get real fancy you could hide/show different links positioned in the same exact place to create a "toggle link".

Advantages

It's all CSS! Less code overall. Less resources to load. Works without JavaScript. Transition smoother than JavaScript transition.

Disadvantages

Limited browser support. :target is IE9+ (the whole thing fails if :target doesn't work). Transitions are IE 10+. Changing classes or hide/showing/animating with JavaScript can overcome any browser limitations. Also you'll have more freedom in how the markup can be arranged instead of being forced into the specific order presented here. Also possibly slightly better semantics, not needing separate links for opening and closing the menu.

Would you be able to do something similar (without the extra markup) with a label, a hidden checkbox, and the :checked selector? The selectors would be a bit more complex, I would imagine, but it should be possible.

Turns out, yes you can! This is slightly cleaner markup in the header itself, with the downside of having to add the checkbox itself. There’s the added benefit of not mucking around with the browser’s history.

Yep. It’s called the Checkbox hack. In fact, here’s Chris showing you some things you can do with it: http://css-tricks.com/the-checkbox-hack. I’d add that using a checkbox might make backward compatibility with jQuery a little easier because you could write conditionals based off whether the box was :checked or not.

Great idea! One possible downside to this compared to the :target is that selecting a menu item does not collapse the menu, meaning the user will have to manually click the label again to close, or you’ll have to use Javascript to uncheck the box. However, this all just depends on your particular implementation whether automatic closing is necessary.

Totally agree. This makes a nice concept, but impractical in application. Also, having just the width decrease would cause issues with nested images and layout making it look wonky. Still believe JS is the best solution for this method.

Very cool but my biggest argument against this method is that because :target is used a new history entry is added everytime you open and close the menu, which in turn means the back button gets totally mucked up.

I personally really dig this implementation of navigation but one thing to keep in mind is the usability of the menu in landscape mode on a smart phone. If you have lots links in the navigation it is impossible to access them as the navigation panel is fixed (doesn’t scroll).

i like this concept but the three-lines menu icons seems unnatural for me if the menu slides in from the left and not from the top. this icon makes me want to grip it an drag it down. any ideas for a better icon?

That would only be the case for a menu that scrolls along i.e. position: fixed;, but most of the time that just causes a huge lag on mobile devices. Therefore in most cases the user is already at the top of the page. If you still want to prevent that from happening, I think you can – using jQuery – stop the default action.

Good effort on getting this working without JS! However, i’d have preferred absolute/relative positioning and sliding your sidebar in (whilst sliding the main panel out) so that you don’t have text reflow (which may harm performance on a complex page)

Awesome, thanks for sharing! I used this as a basis and implemented a version where the text is not cramped, but shoved to the side (Facebook-like) plus some nice transitions for the content-box as well

Thanks for the menu which work using CSS only. I have one question, if the menu is in opened state, i want to disable all the click events in page-wrap container, to avoid user to click on any of the link inside page-wrap or i want to close the menu, when the user click on page-wrap. Is it possible?

Is there a way of making the .page-wrap have a width of (100% – #main-nav width)?
I don’t want my #main-nav to be the full 20% on wide screens you see, so I’ve styled #main-nav:target as:#main-nav:target{
width: 20%;
max-width: 180px;
min-width: 130px;
}