Shell to start a collapsible menu on touch devices. Demo: http://codepen.io/anon/pen/KmkGb

mobile_menu.html

<div class="page">
    <div class="nav-mobile-pusher">
        <!-- Nav goes here -->
        <nav id="nav-mobile" class="nav-mobile">Mobile menu</nav>
        <!-- Content goes here -->
        <div class="container">
            <a href="/" id="nav-mobile-toggle" class="nav-mobile-toggle">Open/Close</a>
            <br>
            My content
        </div>
    </div>
</div>

script.js

$(function() {
  
    // header mobile navigation button
    $('.nav-mobile-toggle').click(function(e) {
        e.stopPropagation();
        e.preventDefault();
    
        $('.page').toggleClass('s-open');
    
        document.addEventListener('click', bodyClickFn);
        document.addEventListener('touchstart', bodyClickFn);
    });
  
    var resetMenu = function() {
        $('.page').removeClass('s-open');
    };
  
    var bodyClickFn = function(e) {
        if( !hasParentClass( e.target, 'nav-mobile' ) ) {
            resetMenu();
            document.removeEventListener('click', bodyClickFn);
            document.removeEventListener('touchstart', bodyClickFn);
        }
    };
 
    var hasParentClass = function(e, classname){
        if(e === document) return false;
        if($(e).hasClass(classname)){
          return true;
        }
        return e.parentNode && hasParentClass(e.parentNode, classname);
    }
  
});

styles.scss

@import "compass/css3";
body{margin:0;}
.page{
  overflow:hidden;
}
.nav-mobile-pusher {
  height: 100%; //Not sure if needed
  position: relative;
  left: 0;
  z-index: 99;
  @include transition(all 0.5s);
 
	&:after {
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		background: rgba(0,0,0,0.3);
		content: '';
		opacity: 0;
		@include transition(opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s);
	}
 
	.s-open & {
		@include transform(translate3d(240px, 0, 0));
		&:after {
			width: 100%;
			height: 100%;
			opacity: 1;
			@include transition(opacity 0.5s);
			z-index: 200;
		}
	}
}
  
#nav-mobile {
	width: 240px;
	height: 100%;
	background: blue;
	@include transform(translate3d(-100%, 0, 0));
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	@include transition(all 0.5s);
	.s-open & {
		visibility: visible;
		@include transition(transform 0.5s);
	}
}