Chapter.4テクニックを身につける

13ハンバーガーメニューボタンを作成する

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