浮动汉堡菜单css

/* 汉堡图标样式 */
.hamburger {
  display: inline-block;
  cursor: pointer;
  padding: 10px;
}

/* 汉堡图标的横线样式 */
.hamburger .line {
  width: 30px;
  height: 3px;
  background-color: #000;
  margin: 6px 0;
}

/* 菜单样式 */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  width: 200px;
  height: 100%;
  padding: 20px;
  transform: translateX(200px);
  transition: transform 0.3s ease-in-out;
}

/* 菜单展开时的样式 */
.menu.open {
  transform: translateX(0);
}

/* 菜单选项样式 */
.menu ul {
  list-style: none;
  padding: 0;
}

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

/* 点击汉堡图标展开/收起菜单 */
.hamburger.active .line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -8px);
}