jQuery

ドロワーメニューを横から動かすような場合、ドロワーメニュー以外の部分をクリックした時もハンバーガーボタンと同じようにドロワーメニューが非表示になるようにしています。
この場合、jQueryで「指定した要素以外をクリックしたら」というイベント設定が必要になります。

まずevent.targetを使ってクリックした要素をjQueryオブジェクトに変換する。

「closest」で直近の親要素を取得し、
そこに特定の要素があるかを「length」で確認しています。

「!」は否定を意味しています。
つまり、クリックした親要素内に指定した要素がない場合、
if文の中の命令が実行されます。

作例

school.yachin29.com

html

<header>
<h1>FELICA</h1>
<p id="hum-btn"><span></span></p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Creative Collection</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
<div class="container">
<p><img src="img/main.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptas facere adipisci expedita. Amet repudiandae accusamus, rerum iste repellat itaque delectus officia placeat? Delectus voluptatem perferendis, deserunt asperiores quo quod?</p>
</div><!--/.container-->

jQuery

$(function(){

//ハンバーガー
$('#hum-btn').on('click',function(){
$(this).toggleClass('click');
$('#g-nav').toggleClass('slide');
});

$(document).on('click',function(event) {
// event.targetを使ってクリックした要素をjQueryオブジェクトに変換する
//「closest」でその最も近い親要素を指定し、その中に特定の要素があるかを「length」で確認
  if(!$(event.target).closest('#g-nav,#hum-btn').length) {
    $('#g-nav').removeClass('slide');
    $('#hum-btn').removeClass('click');
  }
});

});