尝试使用jQuery创建汉堡菜单

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<div class="hamburger-menu">
  <div class="hamburger-icon"></div>
  <ul class="menu-list">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

.hamburger-menu {
  position: relative;
}

.hamburger-icon {
  width: 30px;
  height: 3px;
  background-color: #000;
  margin-bottom: 5px;
}

.menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
}

.menu-list li {
  margin-bottom: 10px;
}

.menu-list li a {
  color: #000;
  text-decoration: none;
}

$(document).ready(function() {
  $('.hamburger-icon').click(function() {
    $('.menu-list').slideToggle();
  });
});