如何制作汉堡包抽屉图标动画

<div class="container">
  <div class="hamburger"></div>
  <ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.container {
  width: 300px;
  height: 100%;
  background-color: #f1f1f1;
}

.hamburger {
  width: 30px;
  height: 3px;
  background-color: #333;
  margin: 10px;
  transition: transform 0.3s;
}

.menu {
  list-style: none;
  padding: 0;
  display: none;
}

.menu li {
  padding: 10px;
}

.menu.show {
  display: block;
}

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', function() {
  menu.classList.toggle('show');
});