Custom fullscreen menu in Divi

Static Version:

<script>
jQuery(function($){
  menuBtn = $(".menu_btn");
  menuX = $(".menu_x");
  menuList = $(".menu_list");
  
  menuX.hide();
  menuList.hide();
  
  menuX.css("cursor","pointer");
  menuBtn.css("cursor","pointer");
  
  menuBtn.click(function(){
    menuBtn.hide();
    menuX.show();
    menuList.show();
  });
  
  menuX.click(function(){
    menuX.hide();
    menuBtn.show();
    menuList.hide();
  });
});
</script>

Animated Version:

<script>
jQuery(function($){
  menuBtn = $(".menu_btn");
  menuX = $(".menu_x");
  menuList = $(".menu_list");
  
  menuX.hide();
  menuList.hide();
  
  menuX.css({
    "cursor":"pointer",
    "transform":"rotate(-90deg) scale(0)",
    "opacity":"0",
    "transition":"transform 0.25s cubic-bezier(.2,0,0,1), opacity 0.25s cubic-bezier(.2,0,0,1)"
  });
  menuBtn.css({
    "cursor":"pointer",
    "transform":"rotate(0deg) scale(1)",
    "opacity":"1",
    "transition":"transform 0.25s cubic-bezier(.2,0,0,1), opacity 0.25s cubic-bezier(.2,0,0,1)"
  });

  menuList.css({
    "transform":"translateX(100%)",
    "transition":"transform 0.5s cubic-bezier(.2,0,0,1)"
  });
  
  
  
  menuBtn.click(function(){
    menuBtn.css({
      "transform":"rotate(90deg) scale(0)",
      "opacity":"0",
    }).delay(250).hide(0);
    
    menuX.show(0).css({
      "transform":"rotate(0deg) scale(1)",
      "opacity":"1",
    });
    
    menuList.show(0).delay(0).css({
      "transform":"translateX(0%)"
  	});
  });
  
  menuX.click(function(){
    menuX.css({
      "transform":"rotate(-90deg) scale(0)",
      "opacity":"0",
    }).delay(250).hide(0);
    
    menuBtn.show(0).css({
      "transform":"rotate(0deg) scale(1)",
      "opacity":"1",
    });
    menuList.css({
      "transform":"translateX(100%)"
  	}).delay(500).hide(0);
  });
});
</script>