Off Canvas Menu with CSS :target
Published by Chris Coyier
"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.
View Demo
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.
<!-- I am collapsed by default -->
<nav id="main-navigation">
<a class="#">Nav Links</a>
<!-- more -->
</nav>
<!-- I am full width by default -->
<div>
<header>
<a class="#main-navigation">Menu</a>
<h1>Title</h1>
</header>
<!-- content -->
</div>.navigation {
/* Collapsed */
;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
%;
}
.page-wrap {
%;
float: right;
}Open Menu State with :target
Notice that this link:
<a class="#main-navigation">Menu</a>Matches the ID of:
<nav id="main-navigation">That's a regular ol' hash-link. The page will "jump" to that element. More importantly to us, it will make this selector match:
#main-navigation:target {
}So when that link is clicked, we can un-hide the menu by increasing it's width. Might as well make it slide out nicely.
.navigation {
transition: width 0.3s ease;
}
#main-nav:target {
%;
}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 {
%;
}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 class="#">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.
View Comments
Comments
Awesome, some ipad app has this type of things. Like twitter,facebook ipad app has this type of initially hidden nav behind main layout.
Thanks.
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.
codepen.io/jetpacmonkey/pen/ktIJz
Yep. It’s called the Checkbox hack. In fact, here’s Chris showing you some things you can do with it: 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.
What would really be nice for this would be Tab Atkins’s toggle state idea: www.xanthir.com/b4Kn0
Great idea! One possible downside to this compared to the
:targetis 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.Cool demo! Another disadvantage is that this method affects the browser history. This could be fixed using the history API, but the idea is not to use Javascript.
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.
That is always a problem for me too. Fortunately Jeremy made another version that doesn’t have this problem: codepen.io/jetpacmonkey/pen/ktIJz
I LOVE this! I also love Anthony’s plugin as well.
I just tried it out with some added media queries as well to show/hide the expand/collapse nav: codepen.io/Jenn/pen/tIFaH
Nice demo but I prefer the :checked solution because of the history problem (yes, phones have back buttons and they are used…) and be careful with support on mobiles (with the two techniques)
Be careful with jPanelMenu, it doesn’t work with some browsers… (android 2.1 for example)
Problem with navigation and user is gone… always test with “bad” browsers !
If I had started doing that with CSS, I would have used a checkbox, which, when checked, shows the menu. I would then used the
:checkedselector as well as the+selector.That removes the ugly hash in the URL, but is the browser support any better?
Nice little demo Chris!
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).
cl.ly/Kjwy
Maybe adding
overflow:scrollon the open state could be a work around…Thank you so much for sharing this. This is really cool.
I’m going to test it :-)
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?
Nice demo. I’ve tried this on a few different projects. I’ve also found that it works pretty nicely for creating tabbed sections without JS. Like you said, though, it fails in older browsers.
<a class=”#”> to close the menu has the downside of jumping to the top of the page instead of staying at the place before opening the menu.
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.Nice. Here’s an off-canvas example using the general sibling combinator.
www.vinceallen.com/offcanvas/index.html
More importantly Mr. Coyer! How did you get this “☰” character! Share with the class!
Unicode 9776 -> ☰
css-tricks.com/three-line-menu-navicon/
Thats a good one! Thanks Jeremy!
I think this would come in most handy for use on mobile devices. Since there aren’t any mobile devices running IE8 and below, is limited browser support even an issue?
As always, great post! Thanks!
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)
november permalink comment target checkbox
for its contents. This is a safe-cache copy of the original web site.