汉堡包按钮容器

/* 汉堡包按钮容器 */
.hamburger-btn {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #42b883;
  border-radius: 50%;
}

/* 三条横线 */
.hamburger-btn span {
  display: block;
  width: 45px;
  height: 5px;
  background: white;
  position: absolute;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
}

/* 默认状态位置 */
.hamburger-btn span:nth-child(1) { top: 22px; }
.hamburger-btn span:nth-child(2) { top: 37px; }
.hamburger-btn span:nth-child(3) { top: 52px; }

/* 选中状态（菜单打开） */
.menu-toggle:checked + .hamburger-btn span:nth-child(1) {
  transform: translateY(15px) rotate(45deg);
  top: 37px;
}

.menu-toggle:checked + .hamburger-btn span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.menu-toggle:checked + .hamburger-btn span:nth-child(3) {
  transform: translateY(-15px) rotate(-45deg);
  top: 37px;
}

/* 导航菜单动画 */
.nav-menu {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  transform: scale(0.95);
  max-height: 0;
}

.menu-toggle:checked ~ .nav-menu {
  opacity: 1;
  transform: scale(1);
  max-height: 500px;
}

　　

                <div class="vue-hamburger">
                    <!-- 隐藏的复选框控制菜单状态 -->
                    <input type="checkbox" id="menuToggle" class="menu-toggle">
                    
                    <!-- 汉堡包按钮 -->
                    <label for="menuToggle" class="hamburger-btn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </label>
                    
                    <!-- 导航菜单 -->
                    <div class="nav-menu">
                        <ul>
                            <li class="active">
                                <i class="fas fa-home"></i>
                                <span>首页</span>
                            </li>
                            <li>
                                <i class="fas fa-user"></i>
                                <span>个人资料</span>
                            </li>
                            <li>
                                <i class="fas fa-cog"></i>
                                <span>设置</span>
                            </li>
                            <li>
                                <i class="fas fa-chart-bar"></i>
                                <span>数据统计</span>
                            </li>
                            <li>
                                <i class="fas fa-envelope"></i>
                                <span>消息通知</span>
                            </li>
                            <li>
                                <i class="fas fa-sign-out-alt"></i>
                                <span>退出登录</span>
                            </li>
                        </ul>
                    </div>
                </div>