$(function() {

var body = $('body');
var wrapper = $('#wrapper');
var drawer = $('#global');
var drawerWidth = drawer.width();
var openButton = $('#header .open');
var closeButton = $('#global .close');

//上に重ねるレイヤー
body.append('<div id="disable-layer"></div>');
var disableLayer = $('#disable-layer');

//メニューを開くときの動作
function openMenu(){
drawer.addClass('active');
drawer.css({
'margin-left': -drawerWidth,
'box-shadow': '-2px 0px 4px rgba(0,0,0,0.3)'
});
wrapper.css({
'margin-left': -drawerWidth
});
disableLayer.css({
display: 'block'
});
}

//メニューを閉じるときの動作
function closeMenu(){
drawer.removeClass('active');
drawer.css({
'margin-left': 0,
'box-shadow': ''
});
wrapper.css({
'margin-left': 0
});
disableLayer.css({
display: 'none'
});
}

//メニューを開く
openButton.click(function(){
if( drawer.hasClass('active') ){
closeMenu();
}else{
openMenu();
}
});

//メニューを閉じる
closeButton.click(function(){
if( drawer.hasClass('active') ){
closeMenu();
}
});

//メニューを開いた状態のときにメニュー以外をクリックで閉じる
disableLayer.click(function(){
if( drawer.hasClass('active') ){
closeMenu();
}
});

});

#global {
width: 280px;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 999;
background: #FFF;
overflow-y: auto;
}
#global,
#wrapper {
transition: all 0.5s ease
}

<div id="wrapper">
<header id="header" class="clearfix">
<h1 class="logo">Drawer Menu Demo</h1>
<div class="right">
<p class="open"><i class="fa fa-bars"></i> MENU</p>
</div>
</header>
<div id="contents">
ここにテキストここにテキスト
</div>
</div>

<nav id="global">
<h1 class="headline">Drawer Menu</h1>
<ul id="global-menu">
<li><a href="">Aページ</a></li>
<li><a href="">Bページ</a></li>
<li><a href="">Cページ</a></li>
<li><a href="">Dページ</a></li>
</ul>
<div id="global-close">
<p class="close"><i class="fa fa-times"></i> 閉じる</p>
</div>
</nav>