very simple offcanvas drawer menu

index.html

<i class="material-icons" id="openMenu">menu</i>

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
  </ul>
</div>

<div id="bodyMask"></div>

script.js

var $body = $('body');
$('#openMenu').on('click', function(e){
  $body.addClass('openMenu');
  e.stopPropagation();
  $(document).on('click', function(e){
    if(!$(e.target).closest('#menu').length){
    $body.removeClass('openMenu');
  }
});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body.openMenu{
  overflow:hidden;
}
#bodyMask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:transparent;
  visibility:hidden;
  transition:.8s;
  .openMenu &{
    background-color:rgba(0,0,0,.5);
    visibility:visible;
  }
}
#openMenu{
  color:#999;
  transition:.3s;
  cursor:pointer;
  &:hover{color:#000;}
}
#menu{
  width:280px;
  height:100%;
  background-color:#fff;
  transition:.5s ease-in-out;
  position:fixed;
  left:-280px;
  top:0;
  z-index:1;
  box-shadow:0 0 8px rgba(0,0,0,.2);
  overflow:auto;
  .openMenu &{left:0;}
  ul{
    list-style:none;
    padding:0;
    margin:0;
    li{
     a{
       display:block;
       padding:12px;
       background-color:#fff;
       text-decoration:none;
       color:#888;
       border-bottom:1px solid rgba(0,0,0,.12);
       transition:.3s;
          &:hover{
            background-color:#f5f5f5;}
        }
      }
    }
}

very simple offcanvas drawer menu.markdown

very simple offcanvas drawer menu

Forked from Captain Anonymous's Pen jbNXXq.

A Pen by Chia Yi Lai on CodePen.

License.