The off-canvas layout I made for this tutorial is based on Off Canvas Menu with CSS :target. I made some changes to this code to make it look like the Spotify Android app:

  • A fixed header that doesn't animate
  • A subtle animation on the items on the left and a slide animation

The core concept is based on this CSS code, pay attention to the :target pseudo selector  (will be triggered when you click on a link where #main-nav is targetted (this is SASS syntax):

#main-nav:target {
   width: 20%;
   a { margin-left: 0; }
}
#main-nav:target ~ .page-wrap {
   width: 80%;
}
#main-nav:target ~ .main-header {
   .open-menu {
      display: none;
   }
   .close-menu {
      display: block;
  }
}

This link triggers the :target CSS selector:

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

View the demo

UPDATE 31/10/14: There is a better solution, proposed by Shaw in the comments below, that make use of CSS transforms for more performant animations. See it here.