A Pen by Oliver Knoblich.

index.haml

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

.wrapper
  
  #sidebar.scrolling
    %ul
      - (1..25).each do
        %li
          %a Link
        
  #swipe.scrolling
    #swipeme
    .header
      #button
    .content
      %h1 Off Canvas Partial Touch Template
      %h2 with hammer.js and Flexbox
      %ul
        %li
          Click
          %span 
          to open the sidebar
        %li
          Click the content to open the sidebar (only before the line)
        %li
          Swipe
          %span 
          the content with your mouse or finger to the right (only before the line)
        %li
          Click
          %span 
          to close the sidebar
        %li
          Click the content to close the sidebar (anywhere)
        %li
          Swipe
          %span 
          the content with your mouse or finger to the left (anywhere)

Off-Canvas-Partial-Touch-Template.markdown

Off Canvas Partial Touch Template

with hammer.js and Flexbox

A Pen by Oliver Knoblich on CodePen.

License.

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) {
    if($('#swipe').hasClass('isOpen')) {
      e.preventDefault();
      closeSidebar();
    }
  });
  
  $('#swipeme').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    
    if($('#swipe').hasClass('isOpen')) {
      closeSidebar();
    } else {
      openSidebar();
    }
    
  });
  
});

style.scss

@import "compass";
@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css');

$w: #eee;
$c: #4a6a8a;

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  font: 16px/1 Lato, sans-serif;
  color: $c;
  background: $c;
  -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: 12px 20px;
  border-bottom: 1px solid rgba(#fff,.3);
}

#swipe {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: $w;
  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;
  border-bottom: 1px solid $c;
  background: #fff;
}

.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: $c;
}

.content {
  padding: 30px 80px;
}

#swipeme {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 100%;
  border-right: 1px solid $c;
}





/* Presentation Stuff */

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

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

ul {
  list-style: none;
}

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

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