ساخت منوی همبرگری به کمک CSS و JQuery

<nav>
   <span class="icon-menu">☰</span>
   <ul id="menu" >
     <div class="icon-cross">˟</div>
     <li><a href="#"> خانه </a></li>
     <li><a href="#"> وبلاگ </a></li>
   </ul>
</nav>

@media only screen and (max-width:991px) {
    
}

@media only screen and (max-width:991px) {
    nav .icon-menu{  
      display: inline-block;
    }
    nav .icon-cross{
     display:none;
     padding:0 20px 0 0;
     color: #969ba8;
     cursor: pointer;
     font-size:3rem;
    }
}

nav ul{
  height:100%;
  right:-400px;
  position:fixed;
  padding:20px 0;
}

@media only screen and (max-width:991px) {
    .slide-in{
        height: 100%;
        padding:2px 0;
        margin: 0;
        position: fixed;
        top: 0;
        right:0;
        width: 300px;
        background-color: white;
        z-index: 100;
    }
}

#overlay{
    background-color: rgba(0, 0, 0, 0.82);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
    display: none;
}

$(".icon-menu").click(function(){
    $("#menu").addClass("slide-in");
    $(".icon-cross").css("display","inline-block");
    $("#overlay").show();
    $("body").css("overflow", "hidden")
});

$(".icon-cross, #overlay").click(function(){
    $("#menu").removeClass("slide-in");
    $(".icon-cross").css("display","none");
    $("#overlay").hide();
    $("body").css("overflow", "auto")
});