如何设置Hamburger Menu使其展开后铺满整个屏幕

要让汉堡菜单在移动端展开时铺满整个屏幕，需要修改CSS中菜单的宽度、定位及过渡属性，同时调整HTML内联样式避免错位。以下是修改后的完整代码及关键说明：

修改后的CSS代码 #

.body {
  background-color: white;
  font-family: sans-serif;
}

.searchbar {
  float: right;
}

.image {
  text-align: center;
}

.setsumei {
  margin-left: 20px;
  margin-right: 20px;
}

.footer {
  width: 100%;
  height: 40px;
  text-align: center;
  border-top: 1px solid black;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -40px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  height: 20px;
}

.site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}

*,
*:before,
*:after {
  padding-left: 0;
  margin: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.cp_cont {
  height: auto;
}

/* menu */
.cp_offcm03 {
  position: relative;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  -webkit-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  text-align: center;
  color: black;
  background-color: white;
}

.cp_offcm03 nav,
.cp_offcm03 ul {
  height: 100%;
}

.cp_offcm03 li {
  display: inline-block;
  margin-right: -6px;
}

.cp_offcm03 a {
  display: block;
  padding: 15px 45px;
  margin-bottom: -5px;
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

.cp_offcm03 a:hover {
  background-color: lightgray;
}

/* menu toggle */
#cp_toggle03 {
  display: none;
}

#cp_toggle03:checked~.cp_offcm03 {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#cp_toggle03:checked~.cp_container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.cp_mobilebar {
  display: none;
}

/* content */
.cp_container {
  position: relative;
  top: 0;
  padding: 35px auto;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}

.cp_content {
  margin: 0 auto;
  padding: 20px;
  height: 65vh;
  text-align: center;
}

@media (max-width: 1130px)and (min-width: 280px) {
  /* menu */
  .cp_offcm03 {
    position: fixed;
    left: -100%;
    overflow-y: auto;
    width: 100%;
    height: 100vh;
    padding-top: 40px;
    color: black;
    background-color: white;
    z-index: 1000;
  }
  .cp_offcm03 nav {
    background: white;
    border-right: none;
    margin-left: 0;
  }
  .cp_offcm03 li {
    display: block;
    margin-right: 0;
  }
  .cp_offcm03 a {
    padding: 20px;
  }
  /* menu toggle */
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  .cp_menuicon {
    display: block;
    position: relative;
    width: 25px;
    height: 100%;
    cursor: pointer;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span {
    display: block;
    position: absolute;
    top: 55%;
    margin-top: -0.3em;
    width: 100%;
    height: 0.2em;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
  }
  .cp_menuicon>span:before,
  .cp_menuicon>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span:before {
    -webkit-transform: translateY(-0.6em);
    transform: translateY(-0.6em);
  }
  .cp_menuicon>span:after {
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }
  #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cp_toggle03:checked+.cp_mobilebar span:before,
  #cp_toggle03:checked+.cp_mobilebar span:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #cp_toggle03:checked~.cp_offcm03 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #cp_toggle03:checked~.cp_container {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  input:checked~#h-menu_black {
    display: block;
    opacity: .6;
  }
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }
  /* content */
  .cp_container {
    top: 60px;
    height: 92vh;
    text-align: center;
  }
  .noscroll {
    overflow: hidden;
    position: fixed;
  }
}

修改后的HTML代码 #

<div class="cp_cont">
  <input id="cp_toggle03" type="checkbox" />

  <div class="cp_mobilebar">
    <label for="cp_toggle03" class="cp_menuicon">
            <span></span>
        </label>
  </div>

  <label id="h-menu_black" for="cp_toggle03"></label>

  <div id="body" class="noscroll"></div>

  <header class="cp_offcm03">
    <nav>
      <ul style="text-align: center; overflow: hidden">
        <li style="border-bottom: 1px solid lightgray"><a href="#">Home</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">Blog</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">About This Website</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">Bibliography</a></li>
      </ul>
    </nav>
  </header>
</div>

关键修改点说明 #

1. 全屏菜单设置：将移动端.cp_offcm03的width设为100%，left设为-100%，初始完全隐藏在屏幕左侧，展开时通过translateX(100%)滑入全屏。
2. 移除错位样式：删除.cp_offcm03 nav的负margin及ul的内联偏移，确保菜单内容居中显示。
3. 取消内容平移：修改#cp_toggle03:checked~.cp_container的transform值为0，菜单直接覆盖在主内容上方，无需移动内容区。
4. 修正遮罩关联：将#h-menu_black的for属性关联到正确的checkbox，点击遮罩可关闭菜单。
5. 滚动优化：将菜单的overflow-y设为auto，菜单项过多时允许垂直滚动。

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