This site is dedicated to all things I see and that I think are interesting to publish almost always are other very smart people.

Off Canvas Menu with CSS :target 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.

 

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

<!-- I am full width by default -->
<div>
  <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">

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 anadjacent 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.

Off Canvas Menu with CSS :target  is a post from CSS-Tricks

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s