swipe menu with jquery

$(document).ready(function() {
  // only small screens
  if ($(window).width() <= 1600) {
    // show menu on swipe to right
    $(document).on('swiperight', function(e) {
      e.preventDefault();
      $('#menu').animate({
        left: '0'
      });
    });  // hide menu on swipe to left
    $(document).on('swipeleft', function(e) {
      e.preventDefault();
      $('#menu').animate({
        left: '-100%'
      });
    });
    // show menu on swipe to left
    $(document).on('swipeleft', function(e) {
      e.preventDefault();
      $('#menu2').animate({
        right: '0'
      });
    });  // hide menu on swipe to right
    $(document).on('swiperight', function(e) {
      e.preventDefault();
      $('#menu2').animate({
        right: '-100%'
      });
    });
  }
});

* {
  margin: 0;
  padding: 0;
  outline: none;
  font-family: sans-serif;
}

#menu {
  background-color: #E64A4A;
  width: 80%;
  height: 400px;
  position: fixed;
  top: 0;
  left: -100%;
  color: #fff;
}

#menu2 {
  background-color: #000;
  width: 80%;
  height: 400px;
  position: fixed;
  top: 0;
  right: -100%;
  color: #fff;
}

h1 {
  text-align: center;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script><ul id="menu"><!--   YOUR LINKS GOES HERE   --></ul><ul id="menu2"><!--   YOUR LINKS GOES HERE   --></ul><h1>Swipe to &lt;&lt; or &gt;&gt;</h1>