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.

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" class="navigation">
   <a href="#">Nav Links</a>
   <!-- more -->
</nav>

<!-- I am full width by default -->
<div class="page-wrap">
  <header>
    <a href="#main-navigation">Menu</a>
    <h1>Title</h1>
  </header>

  <!-- content -->
</div>

.navigation {
  
  /* Collapsed */
  width: 0; 

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

.page-wrap {
  width: 100%;
  float: right;
}

Open Menu State with :target

Notice that this link:

<a href="#main-navigation">Menu</a>

Matches the ID of:

<nav id="main-navigation" class="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 {
  width: 20%; 
}

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.