A CodePen by Oliver Knoblich. Off Canvas Partial Touch Template - with hammer.js and Flexbox

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://eightmedia.github.io/hammer.js/dist/jquery.hammer.js"></script>

<div class="wrapper">
  
  <div id="sidebar" class="scrolling">
    <ul>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
    </ul>
  </div>
  
  <div id="swipe" class="scrolling">
    <div id="swipeme"></div>
    <div class="header">
      <a id="button"></a>
    </div>
    <div class="content">
      <h1>Off Canvas Partial Touch Template</h1>
      <h2>with hammer.js and Flexbox</h2>
      <h3>What you can do with this template:</h3>
      <ul>
        <li>- Click <span>&#xf0c9;</span> to open the sidebar</li>
        <li>- Click the content to open the sidebar (only before the red line)</li>
        <li>- Swipe <span>&#xf0a6;</span> the content with your mouse or finger to the right (only before the red line)</li>
        <li>- Click <span>&#xf0c9;</span> to close the sidebar</li>
        <li>- Click the content to close the sidebar (anywhere)</li>
        <li>- Swipe <span>&#xf0a6;</span> the content with your mouse or finger to the left (anywhere)</li>
      </ul>
    </div>
  </div>
  
</div>

script.js

$(document).ready(function() {

    function openSidebar() {
        $("#swipe").addClass('isOpen');
    }

    function closeSidebar() {
        $("#swipe").removeClass('isOpen');
    }

    $('#swipe').hammer().on('dragleft', function(e) {
        e.preventDefault();
        closeSidebar();
    });

    $('#swipeme').hammer().on('dragright', function(e) {
        e.preventDefault();
        openSidebar();
    });

    $('#swipe').on('click', function(e) {
        e.preventDefault();
        closeSidebar();
    });

    $('#swipeme').on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();

        if($('#swipe').hasClass('isOpen')) {
            closeSidebar();
        } else {
            openSidebar();
        }

    });

});

style.css

@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('http://weloveiconfonts.com/api/?family=fontawesome');

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  font: 16px/1 Lato, sans-serif;
  color: #777;
  background: #444;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  min-height: 100%;
}

.scrolling {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#sidebar {
  position: absolute;
  width: 260px;
  max-height: 100%;
  color: #fff;
}

#sidebar ul li a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid #555;
}

#swipe {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  transform: translate3d(0,0,0);
  transition: all 0.1s linear;
}

#swipe.isOpen {
  transform: translate3d(260px,0,0);
}

.header {
  height: 50px;
  background: #567;
}

.header #button {
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 20px 0 0;
  text-align: center;
}

.header #button:before {
  content:"\f0c9";
  font: 28px/50px 'FontAwesome';
  color: #fff;
}

.content {
  padding: 30px 80px;
}

#swipeme {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 100%;
  border-right: 1px solid rgba(255,0,0,.3);
}

/* Presentation Stuff */

h1 {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 300;
}

h2 {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 300;
  color: #aaa;
}

h3 {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 300;
  color: #aaa;
}

ul {
  list-style: none;
}

.content li {
  margin: 0 0 15px;
}

.content li span {
  font-family: fontawesome;
  font-size: 18px;
  margin: 0 5px;
}