Menu sliding left full page

by davidxmartins

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="myNav" class="overlay">
  <ul>
    <li> <a href="#">Home</a></li>
    <li> <a href="#">Services</a></li>
    <li> <a href="#">Products</a></li>
    <li> <a href="#">About</a></li>
    <li> <a href="#">Contact</a></li>
  </ul>
</div>
<div id="menu" class="menu-icon" onclick="changeIcon(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<h2>Menu sliding left full page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis facilisis mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec maximus sodales mi, eget malesuada erat pharetra at. Aliquam tristique, libero vel vehicula faucibus, sapien felis ullamcorper dolor, eget feugiat eros mauris in metus. Donec consequat, massa vel varius pretium, diam lectus pretium nisl, nec tincidunt ante massa in ex. Pellentesque fermentum felis mi, nec cursus augue hendrerit sit amet. Cras sed enim vehicula, aliquam lorem vel, porta eros. Sed egestas tempor vestibulum. Ut neque velit, ullamcorper vel ante id, imperdiet eleifend urna. Morbi id ante nec est semper vestibulum. Quisque facilisis lacus eget lacus convallis ultricies et vel nisi.</p>

CSS

body {
  font-family: 'arial', sans-serif;
}
* { box-sizing: border-box;}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}


.overlay ul {
  list-style: none;
  padding: 20px 7vw;
  position: relative;
  top: 0;
  width: 100%;
  text-align: left;
  margin-top: 30px;
}
.overlay li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.overlay a {
  display: block;
  padding: 2vh 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  transition: 0.2s;
  text-transform: lowercase;
}
.overlay a:hover, .overlay a:focus {
  color: #818181;
}


/* MENU ICON */

.menu-icon {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 50px;
  top: 20px;
  z-index: 5;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  background-color: white;
}
.change .bar2 {
  opacity: 0;
  background-color: white;
  }
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
  background-color: white;
}

JavaScript

/*jslint browser: true*/
      /*global $, jQuery*/
      $('#menu').click(function() {
        if ($(this).hasClass('active')) {
          $(this).toggleClass('active');
          closeNav();

        } else {
          $(this).toggleClass('active');
          openNav();
        }
      });

      function changeIcon(x) {
        x.classList.toggle("change");
        let state = x.getAttribute('state');
        if (state == 'opened') {
          closeNav();
        } else {
          openNav();
        }
        // console.log(state);
      }

      function openNav() {
        document.getElementById("myNav").style.width = "100%";
        document.getElementById('menu').setAttribute('state', 'opened');
      }

      function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById('menu').setAttribute('state', 'closed');
      }