移动端汉堡菜单适配桌面端底部居中导航栏问题求助

问题描述 #

复制了带精美动画的汉堡菜单并适配移动端后，希望在桌面端将菜单改为屏幕底部居中的常规导航栏，但定位异常，justify-content等常规居中方法无效，尝试Grid布局也未成功。以下是原始代码：

原始CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #262626;
  font-family: "Roboto Slab", serif;
  position: relative;
  overflow-x: hidden;
}

main {
  width: 100vw;
  height: 100vh;
}

#backdrop {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 1rem 1rem 0 0;
  background-color: #727365;
}

#home-link {
  color: #f2f2e4;
  text-decoration: none;
  font-size: 1.7rem;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  position: absolute;
  top: 1.95rem;
  left: 2.6rem;
}

/* Hamburger menu */
#menu a {
  text-decoration: none;
  color: #3f403b;
}

#menu a:hover {
  color: #0c0c0c;
}

#menu-toggle {
  display: block;
  position: absolute;
  top: 2.5rem;
  right: 3rem;
  z-index: 1;
}

#menu-checkbox {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menu-toggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #f2f2e4;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.55s ease;
}

#menu-toggle span:first-child {
  transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menu-checkbox:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #3f403b;
}

#menu-checkbox:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-checkbox:checked ~ span:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  width: 60vw;
  height: 70vh;
  position: absolute;
  right: -100px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  background-color: #bfbfae;
  list-style: none;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menu-checkbox:checked ~ ul {
  transform: none;
  opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgb(88, 88, 88);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 109, 109);
}

/* Media queries */
@media only screen and (min-width: 600px) {
}

@media only screen and (min-width: 769px) {
  #backdrop {
    width: 98%;
    height: 95.5%;
    border-radius: 1rem;
  }

  #menu-checkbox {
    display: none;
  }

  #menu-toggle span {
    display: none;
  }

  #menu {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    transform: none !important;

    padding: 0 1rem 0 1rem;

    position: absolute;
    top: 97vh;
    right: 38.2vw;

    border-radius: 1rem;

    height: fit-content;
    width: max-content;
  }

  #menu li {
    display: inline-block;
  }

  #home-link {
    display: flex;
    justify-content: center;
    position: static;

    padding-top: 0.5rem;
  }
}

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>OVERCASTING</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="script/js.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <div id="backdrop">
        <header id="wrapper">
          <nav>
            <a href="index.html" id="home-link">OVERCASTING</a>
            <div id="menu-toggle">
              <input id="menu-checkbox" type="checkbox" />
              <span class="hamburger-span"></span>
              <span class="hamburger-span"></span>
              <span class="hamburger-span"></span>
              <ul id="menu">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
    </main>
  </body>
</html>

问题分析 #

当前桌面端媒体查询中，#menu使用硬编码的right:38.2vw实现居中，会导致不同屏幕宽度下错位；同时#menu的父元素#menu-toggle是绝对定位，#menu的定位参考为body而非父容器，导致常规居中方法失效。

解决方案 #

修改桌面端媒体查询内的样式，通过固定容器+Flex布局实现稳定居中：

修改后的媒体查询代码 #

@media only screen and (min-width: 769px) {
  #backdrop {
    width: 98%;
    height: 95.5%;
    border-radius: 1rem;
  }

  #menu-checkbox {
    display: none;
  }

  #menu-toggle span {
    display: none;
  }

  /* 调整菜单容器为底部居中的固定定位 */
  #menu-toggle {
    position: fixed;
    bottom: 1vh;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 1;
    top: auto; /* 覆盖移动端top值 */
  }

  #menu {
    transition: none;
    transform: none;
    padding: 0.5rem 1rem;
    position: static; /* 取消绝对定位，跟随父容器布局 */
    border-radius: 1rem;
    height: fit-content;
    width: max-content;
    background-color: #bfbfae;
    display: flex; /* Flex横向排列菜单项 */
    gap: 2rem; /* 菜单项间距，替代li的padding */
  }

  #menu li {
    display: block;
    padding: 0.5rem 0;
  }

  #home-link {
    display: flex;
    justify-content: center;
    position: static;
    padding-top: 0.5rem;
  }
}

修改说明 #

1. 容器居中：将#menu-toggle设为fixed定位，left:0和right:0配合justify-content:center，让容器固定在屏幕底部且水平居中
2. 菜单布局：#menu取消绝对定位，用flex横向排列菜单项，gap控制项间距更灵活
3. 移除硬编码：删除right:38.2vw这类固定值，确保不同屏幕下都能稳定居中
4. 优先级优化：移除!important，媒体查询样式优先级足够覆盖移动端样式

额外优化建议 #

• 给body添加min-height:100vh，确保内容占满屏幕高度
• 给底部导航栏添加阴影提升层次感：box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
• 统一使用rem作为单位，提升多设备适配性
• 给菜单项添加内边距，扩大点击区域：#menu li a { padding: 0 0.5rem; }

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