<div class="menu">
  <a class="menu-triger" href="#">open</a>
  <div class="menu-popup">
    <a class="menu-close" href="#">close</a>
    <ul>
      <li><a href="http://google.com" target="_blank">Home</a></li>
      <li><a href="#about-me">About me</a></li>
      <li><a href="#skills">Skills</a></li>   
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contacts">Contacts</a></li>
    </ul>           
  </div>
</div>

.mobile {
  width: 375px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #ddd;
  background: rgb(29, 27, 27);
  overflow: hidden;
}

.logo {
  position: absolute;
  top: 13px;
  left: 138px;
  font-weight: 900;
  font-size: 30px;
  color: black;
}
main {
  padding: 10px;
}

.menu-triger {
  background: url(img/Group\ 3.svg) 0 0 no-repeat;
  display: block;
  width: 30px;
  height: 20px;
  position: absolute;
  right: 30px;
  top: 68px;
} 
.menu-close {
  background: url(img/Group.svg) 0 0 no-repeat;
  display: block;
  width: 23px;
  height: 23px;
  position: absolute;
  right: 28px;
  top: 66px;
  z-index: 100;
}
.menu-popup {
  background: #fff;
  display: none;
  position: absolute;
  right: -110%;
  top: 0;
  width: 375px;
  height: 100%;
  box-sizing: border-box;
  padding-top: 66px;
  padding-left: 26px;
  z-index: 9999;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.menu-popup ul {
  margin: 0;
  padding: 0;
}
.menu-popup li {
  list-style: none;
  padding-bottom: 68px;
}
.menu-popup li a {
  font-size: 34px;
  line-height: 42px;
  font-weight: 600;
  color: #828282; 
  text-decoration: none;
}
.menu-popup li a:hover {
  font-size: 34px;
  line-height: 42px;
  color: #090909;
}
.body_pointer * {
  cursor: pointer;
}

$(function() {
  var $menu_popup = $('.menu-popup');

  $(".menu-triger").click(function(){
    $('body').addClass('body_pointer');   
    $menu_popup.show(1);
    $menu_popup.animate(
      {right: parseInt($menu_popup.css('left'),10) == 0 ? -$menu_popup.outerWidth() : 0}, 
      300
      );
    return false;
  }); 

  $(".menu-close").click(function(){
    $('body').removeClass('body_pointer');    
    $menu_popup.animate(
      {right: parseInt($menu_popup.css('right'),10) == 0 ? -$menu_popup.outerWidth() : 0}, 
      300, 
      function(){
        $menu_popup.hide(0);
      }
      );
    return false;
  });

  $(document).on('click', function(e){
    if (!$(e.target).closest('.menu-popup').length){
      $('body').removeClass('body_pointer');
      $menu_popup.animate(
        {right: parseInt($menu_popup.css('right'),10) == 0 ? -$menu_popup.outerWidth() : 0}, 
        300, 
        function(){
          $menu_popup.hide(0);
        }
        );
    }
  });
})