ハンバーガーメニューでクローズ（バツ）の切り替えを作成する - レクチャーサイト

08ハンバーガーメニューでクローズ（バツ）の切り替えを作成する

イベント発生させる要素のID名 #hamburger
追加または削除するクラス名 .active

-- js --
$(function(){
  $('#hamburger').click(function(){
    $(this).toggleClass('active');
  });
});

-- css --
#hamburger {
  position: relative;
  width: 44px;
  height: 44px;
  background: #eee;
}
#hamburger span {
  position: absolute;
  width: 30px;
  height: 2px;
  left: 7px;
  background: #000;
}
#hamburger .top {
  top: 11px;
}
#hamburger .middle {
  top: 21px;
}
#hamburger .bottom {
  top: 31px;
}
#hamburger.active .top {
  transform: translateY(11px) rotate(45deg);
}
#hamburger.active .middle {
  opacity: 0;
}
#hamburger.active .bottom {
  transform: translateY(-9px) rotate(-45deg);
}