html:

 <div class="mobile_nav_menu"><i class="iconfont icon-caidan"></i></div>
 <div class="mobile_nav_content">
       <div class="close_btn"><i class="iconfont icon-guanbi"></i></div>
       <div class="item">
         <a href="#" class="link">HOME</a>
         <i class="iconfont icon-jinrujiantou"></i>
       </div>
       <div class="item">
        <a href="#" class="link">PRODUCTS</a>
        <i class="iconfont icon-jinrujiantou"></i>
      </div>
      <div class="item">
        <a href="#" class="link">MARKETPLACE</a>
        <i class="iconfont icon-jinrujiantou"></i>
      </div>
      <div class="item">
        <a href="#" class="link">OUR SYSTEM</a>
        <i class="iconfont icon-jinrujiantou"></i>
      </div>
      <div class="item">
        <a href="#" class="link">CONTACT</a>
        <i class="iconfont icon-jinrujiantou"></i>
      </div>
     </div>

css:

.mobile_nav_menu{
    position: absolute;
    top: 20px;
    right: 15px;
    z-index:22;
  }
  .mobile_nav_menu .iconfont{
    color: #fff;
    font-size: 30px;
  }
   .mobile_nav_content{
   width: 60vw;
   right: -60vw;
   position: fixed;
   top: 0;
   background-color:#fff;
   height: 100vh;
   z-index: 333;
   padding:60px 30px 30px 30px;
 }
 .mobile_nav_content .close_btn{
   position: absolute;
   right: 0;
   top: 0;
   right: 20px;
   top: 20px;
 }
 .mobile_nav_content .close_btn .iconfont{
   font-size: 14px;
 }
 .mobile_nav_content .item{
   font-size: 15px;
   margin:30px 0;
   width: 100%;
  display: flex;
  justify-content: space-between;
}
.mobile_nav_content .item .iconfont{
  font-size: 18px;
}

jq:

 $(".mobile_nav_menu").click(function(){
      $(".mobile_nav_content").animate({right: '0'},500);
    });
    $(".close_btn").click(function(){
      $(".mobile_nav_content").animate({right: '-60vw'},500);
    });

效果：