Instead of Off Canvas, what about OnCanvas? Sliding menus with no DOM acrobatics! Semantic markup, light JavaScript, highly flexible.

index.html

<section id='main' role='main'>
  <header>
    <a href='#menu' id='show-menu'>Menu</a>
    <h1 id='logo'>Hello!</h1>
  </header>
  content goes here
  <footer></footer>
</section>
<div id='menu'>
  <ul>
    <li>this thing</li>
    <li>this thing</li>
    <li>this thing</li>
  </ul>
</div>

OnCanvas.markdown

OnCanvas

Note: this demo is a work in progress. It's ugly and is only intended to show the most basic functionality of this technique

Instead of Off Canvas, what about OnCanvas? Sliding menus with no DOM acrobatics! Semantic markup, light JavaScript, highly flexible.

View and edit it live on Codepen.

script.js

$('#show-menu').on('click', function(e){
  e.preventDefault();
  $('body').toggleClass('show-menu');
});

style.css

*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
html{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}

#main{
  background-color: white;
  width: 100%;
  height: 100%;
  padding: .5em;
  z-index: 10;
  position: relative;
}

#menu{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
}

#menu ul{
  margin: 0;
  padding: 0;
}

#menu ul li{
  list-style-type: none;
  float: left;
  padding: .5em;
}

#show-menu{
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  padding: .5em;
}

@media screen and (max-width: 600px){
  #show-menu{
     display: block;
  }
  #menu{
    z-index: 5;
    height: 100%;
    width: 50%;
    background-color: blue;
  }
  #menu li{
    clear: both;
    margin-left: 10%;
  }
  body.show-menu #main{
    margin-left: -50%;
  }
}