Swipeable Hamburger Menu Concept with Vanilla JS

Swipeable hamburger menu concept with vanilla JS that allows users to toggle menu using scroll events in mobile view.

javascript swipe side menu, mobile web swipe gesture, swipe menu javascript, mobile web bottom navigation css, swipeable menu css, swipe scroll javascript

How to make use of it:

1. Create an off-canvas menu on the page.

<div id="hamburger-menu">
  <ul class="list">
    <li class="active"><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contact</a></li>
  </ul>
</div>

2. Create a background overlay that appears when toggling off the panel.

<div id="hamburger-menu__bg"></div>

3. Create a hamburger toggle button to toggle navigation off the canvas.

<div id="hamburger-btn">
  <span></span>
  <span></span>
  <span></span>
</div>

4. Basic CSS/CSS3 Styles.

.hamburger-drawer, #invis-drawer, #hamburger-menu, #hamburger-menu__bg {
  position: fixed;
  min-height: 100vh
}
#invis-drawer {
  width: 5%;
  background-color: #444
}
#hamburger-menu {
  width: 60%;
  background-color: #f1f1f1;
  z-index: 100;
  transform: translate3d(-100%, 0, 0)
}
#hamburger-menu::after {
  content: '';
  position: fixed;
  top: 0;
  right: -20px;
  width: 20px;
  min-height: 100vh
}
#hamburger-menu ul.list {
  list-style: none;
  padding: 0
}
#hamburger-menu ul.list li { padding: 15px }
#hamburger-menu ul.list li.active { background-color: rgba(0, 0, 0, 0.1) }
#hamburger-menu__bg {
  z-index: -1;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}
#hamburger-btn {
  position: relative;
  height: 22px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around
}
#hamburger-btn span {
  width: 30px;
  height: 2px;
  background-color: #000
}

5. Main JavaScript to activate off-board navigation.

var hamburgerDrawer = document.getElementById('hamburger-menu');
var hamburgerBtn = document.getElementById('hamburger-btn');
var hamburgerDrawerBg = document.getElementById('hamburger-menu__bg');
var axisCords;
var hamburgerDrawerWidth = hamburgerDrawer.clientWidth;
var oneByForthScreen = window.innerWidth / 4;
var openStatus = false;
function drawToStart() {
  hamburgerDrawer.animate([
    {
      transform: `translate3d(${axisCords ? axisCords + 'px' : 0 + 'px'}, 0, 0)`
    },
    {
      transform: 'translate3d(-100%, 0, 0)'
    }
  ], {
      duration: 500,
      easing: 'ease-in-out'
    });
  hamburgerDrawer.style.transform = 'translate3d(-100%, 0, 0)';
  openStatus = false;
}
function drawToEnd() {
  hamburgerDrawer.animate([
    {
      transform: `translate3d(${axisCords ? axisCords + 'px' : -100 + '%'}, 0, 0)`
    },
    {
      transform: 'translate3d(0, 0, 0)'
    }
  ], {
      duration: 500,
      easing: 'ease-in-out'
    });
  hamburgerDrawer.style.transform = 'translate3d(0, 0, 0)';
  openStatus = true;
}
// Click on Menu Button to Drawer
hamburgerBtn.addEventListener('click', drawToEnd);
// Click on Background to Close
hamburgerDrawerBg.addEventListener('click', function(){
  if (openStatus) drawToStart();
});
hamburgerDrawer.addEventListener('touchmove',
  function(e) {
    axisCords = e.changedTouches[0].pageX - hamburgerDrawerWidth;
    if (axisCords > 0) axisCords = 0;
    this.style.transform = 'translate3d(' + axisCords + 'px, 0, 0)';
});
hamburgerDrawer.addEventListener('touchend',
  function(e) {
    var endPoint = e.changedTouches[0].pageX;
    var isOverThreshold = endPoint > oneByForthScreen && endPoint < hamburgerDrawerWidth;
    if (endPoint < oneByForthScreen) {
      drawToStart();
    } else if (isOverThreshold) {
      drawToEnd();
    } else {
      openStatus = true;
    }
    axisCords = null;
  });

swipeable off-canvas navigation, swipeable-hamburger Plugin/Github