How to make a popup menu on jQuery swipe?

Question

css

There is a button in the mobile version of the site, when you click on it, a full-screen window appears in which the menu.
How can I make this window appear when swiping from the right side of the screen and hide when swiping from the left?

<nav class="menutf">
      <div class="linem"></div>
      <div class="linem"></div>
      <div class="linem"></div>
</nav>
<div class="navtf">
      <div class="closemenu">ЗАКРЫТЬ</div>
    </div>

.menutf {
  cursor: pointer;
  transition: 0.7s;
  position: absolute;
  width: 80px;
  height: 80px;
  background: #147de0;
  top: 0;
  right: 0;
}

.linem {
  transition: 0.7s;
  width: 70px;
  height: 7px;
  background: #fff;
  margin: auto;
  margin-top: 23px;
}

.linem:first-child {
  margin-top: 7px;
  transition: 0.7s;
}

.navtf {
  position: absolute;
  width: 100%;
  z-index: 10000000;
  height: 10000vh;
  display: none;
  background: #4286f4;
  top: 0;
  left: 0;
}

.closemenu {
  float: right;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  margin: 5px 10px;
  padding: 2px 10px;
  display: block;
  cursor: pointer;
  background: #f49542;
}

$('.menutf').click(function() {
    $('.navtf').fadeIn();
  });

  $('.closemenu').click(function() {
    $('.navtf').fadeOut();
  });

Compiled code: https://jsfiddle.net/xbe1f1bs/6/

Answer 1

How to create a swipe menu on the mobile version of the site?

Answer 2

https://api.jquerymobile.com/swipeleft/

$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );

where fn is your function.
ps well, use on()

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "active" );
});