درست کردن منو موبایلی جذاب در المنتور

<style>
    .rico-menuicon {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      float: left;
      color: red;
    }

    /* خطوط آیکون */
    .rico-menuicon span {
      position: absolute;
      width: 30px;
      height: 3px;
      background-color: #54595F;
      transition: all 0.3s ease;
      border-radius: 50px;
    }

    /* خط بالایی */
    .rico-menuicon span:nth-child(1) {
      top: 8px;
    }

    /* خط وسط */
    .rico-menuicon span:nth-child(2) {
      top: 18px;
    }

    /* خط پایینی */
    .rico-menuicon span:nth-child(3) {
      top: 28px;
    }

    /* حالت ضربدر */
    .rico-menuicon.open span:nth-child(1) {
      transform: translateY(10px) rotate(45deg);    
      background-color: red;
    }

    .rico-menuicon.open span:nth-child(2) {
      opacity: 0;
    }

    .rico-menuicon.open span:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
      background-color: red;
    }



    .rico-menubox{
        height: 100vh;
        position: fixed;
        right: -100%;
        z-index: 99999;
        transition: 0.3s;
        top:0;
    }


    .rico-menubox.active{
        right:0px;
    }
</style>

<div class="rico-menuicon" id="rico-menuicon2">
  <span></span>
  <span></span>
  <span></span>
</div>

<script>
  const ricoMenuIcon2 = document.getElementById("rico-menuicon2");

  ricoMenuIcon2.addEventListener("click", () => {
    ricoMenuIcon2.classList.toggle("open");
  });

  jQuery(document).ready(function($){

    $('.rico-menuicon').click(function(e){
        e.stopPropagation(); // جلوگیری از پخش شدن رویداد به بیرون
        $('.rico-menubox').toggleClass('active');
        $('.rico-menuicon').toggleClass('active');
    });

    $(document).click(function(e){
        if (!$(e.target).closest('.rico-menubox, .rico-menuicon').length) {
            $('.rico-menubox').removeClass('active');
            $('.rico-menuicon').removeClass('open');
        }
    });

  });
</script>