今回はよく使うハンバーガーメニューをJQueryからJavaScriptへ書き変えました。
ハンバーガーメニューが開いている時は、bodyに「is-nav-opened」のclassを付与しています。

下準備

まずhtml

<div class="p-hamburger js-hamburger">
  <span class="p-hamburger__bar">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>

次にcss（今回はscssで書きました）

$color-key: #0d95cb;

.p-hamburger {
  cursor: pointer;
  &__bar {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
    > span {
      display: inline-block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: $color-key;
      transition: .35s;
      &:nth-of-type(1) {
        top: 0;
      }
      &:nth-of-type(2) {
        top: 8px;
      }
      &:nth-of-type(3) {
        bottom: 0;
      }
      .is-active & {
        &:nth-of-type(1) {
          transform: translateY(8px) rotate(-405deg);
        }
        &:nth-of-type(2) {
          opacity: 0;
        }
        &:nth-of-type(3) {
          transform: translateY(-8px) rotate(405deg);
        }
      }
    }
  }
}

JQueryでハンバーガーメニューを実装する場合

var trigger  = $('.js-hamburger');
var body  = $('body');
trigger.on('click', function() {
  if ($(this).hasClass('is-active')) {
    $(this).removeClass('is-active');
    body.removeClass('is-nav-opened');
  } else {
    $(this).addClass('is-active');
    body.addClass('is-nav-opened');
  }
});

サンプル

JavaScriptでハンバーガーメニューを実装する場合

var trigger = document.querySelector('.js-hamburger');
var body = document.querySelector('body'); 
trigger.addEventListener('click', function () {
  if( this.classList.contains('is-active')) {
    this.classList.remove('is-active');
    body.classList.remove('is-nav-opened');
  } else {
    this.classList.add('is-active');
    body.classList.add('is-nav-opened');
  }
});

サンプル