Swipeable Off-canvas Navigation In Vanilla JavaScript

Preview:

Description:

This is a mobile-friendly off-canvas navigation system that allows the users to toggle the menu using swipe events in mobile view.

How to use it:

Create the 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>
    <li><a>Blog</a></li>
    <li><a>CSSScript</a></li>
  </ul>
</div>

Create a background overlay that appears when the off-canvas navigation is toggled.

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

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

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

The primary 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
}

The main JavaScript to activate the off-canvas 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;
  });