如何为响应式汉堡下拉菜单添加关闭X按钮？

步骤1：修改HTML结构 #

在下拉菜单（ul.f-cb）中添加关联到同一个checkbox的关闭按钮，同时给原汉堡图标标签加类名便于样式控制：

<nav class="nav-box">
  <label class="label hamburger" for="toggle">
      &#9776;
  </label>
  <input type="checkbox" id="toggle">
  <ul class="f-cb">
      <!-- 新增关闭按钮 -->
      <li class="close-menu-item">
          <label class="close-btn" for="toggle">×</label>
      </li>
      <!-- 你的原有菜单内容 -->
  </ul>
</nav>

步骤2：调整CSS样式 #

补充和修改以下CSS规则，实现关闭按钮的显示、样式控制，以及菜单的显示/隐藏逻辑：

.label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 22px;
    display: none;
    color: #433F3F;
    float: right;
    width: 180px;
}

#toggle {
    display: none;
}

/* 菜单基础样式：默认小屏幕下隐藏 */
@media only screen and (max-width: 1205px) {
    #form1 > div:nth-child(3) > header > nav.nav-box > ul {
        position: absolute;
        background-color: white;
        min-width: 150px;
        box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);
        z-index: 1;
        display: none; /* 默认隐藏菜单 */
    }

    .label.hamburger {
        display: block;
        cursor: pointer;
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
    }

    /* 选中checkbox时显示菜单 */
    #toggle:checked + .f-cb {
        display: block !important;
    }

    /* 菜单打开时隐藏顶部汉堡图标 */
    #toggle:checked ~ .label.hamburger {
        display: none;
    }

    /* 关闭按钮样式 */
    .close-menu-item {
        text-align: right;
        padding: 10px 20px;
        list-style: none;
    }

    .close-btn {
        font-size: 28px;
        color: grey;
        cursor: pointer;
    }
}

@media only screen and (max-width: 760px) {
    .label.hamburger {
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
    }
}

核心原理 #

利用HTML <input type="checkbox"> 的特性：所有关联同一个id的<label>标签，点击后都会切换checkbox的选中状态。菜单的显示/隐藏完全依赖checkbox的checked状态，点击菜单内的关闭按钮（关联到toggle的label）时，会将checkbox从选中状态切换为未选中，从而触发菜单隐藏。

内容的提问来源于stack exchange，提问作者mark antony