ハンバーガーメニュー（途中）

by yshrkn

HTML

<div class="js-menu-icon menu-icon">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav class="js-menu-wrapper menu-wrapper">
  <ul class="menu__items">
    <li><a href="">menu1</a></li>
    <li><a href="">menu2</a></li>
    <li><a href="">mwnu3</a></li>
    <li><a href="">menu4</a></li>
    <li><a href="">menu5</a></li>
  </ul>
</nav>

SCSS

.menu {
  &-wrapper {
    transform: translateX(-1000px);
    transition: transform .3s ease-out;
    &.active {
      transform: translateX(0);
    }
  }
  &__items {
    margin-top:60px;
    list-style-type: none;
    displat: block;
    background: #ccc;
    padding-left: 0;
  }
  &-icon {
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    >span {
      position: absolute;
      height: 2px;
      width: 100%;
      display: block;
      background: #aaa;
      transition: transform 0.3s ease-out;
      &:nth-child(1) {
        top: 0;
      }
      &:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
      &:nth-child(3) {
        bottom: 0;
      }
    }
    &.active {
      >span {
        &:nth-child(1) {
          transform: translateY(14px) rotate(-45deg);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
          transform: translateY(-14px) rotate(45deg);
        }
      }
    }
  }
}

JavaScript

$(function () {

  /* set variables */
  var jqueryMap = {
    menu: {
      $icon: $(".js-menu-icon"),
      $menu: $(".js-menu-wrapper")
    }
  };

  var stateMap = {
    menu: {
      isActive: false
    }
  };

  var configMap = {
    menu: {
      activeClassName: "active"
    }
  };

  var eventListeners = [{
    element: jqueryMap.menu.$icon,
    event: "click",
    task: function () {
      jqueryMap.menu.$icon.toggleClass(configMap.menu.activeClassName);
      jqueryMap.menu.$menu.toggleClass(configMap.menu.activeClassName);
    }
  }];

  /**
   * Click Manager
   */
  var clickManager = (function () {

    function init() {}

    return {
      init: init
    };
  }());

  function addEventListeners() {
    eventListeners.forEach(function (obj) {
      obj["element"].on(obj.event, obj.task);
    }, this);
  }

  function init() {
    addEventListeners();
  }

  init();
}());