将同时也是汉堡菜单的导航栏居中答案

【问题标题】：Centering a Nav-bar that's also a hamburger menu将同时也是汉堡菜单的导航栏居中
【发布时间】：2023-02-11 23:26:01
【问题描述】：

我复制了一个带有一些漂亮动画的汉堡菜单，做了一些调整以适应我的网站，适用于移动设备。现在我正试图让那个菜单从汉堡包中出来，进入桌面屏幕的中间。我遇到的是具有非常奇怪定位和正常“居中”（例如 justify-content 等）的菜单不起作用。我也试过将它放入网格中，但没有成功。我会在这里粘贴我的 html 和 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;
  }
}

<!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>

【问题讨论】：

如果您不需要ul#menu 位于div#menu-toggle 内，请考虑将其取出并放入header#wrapper。另一种解决方案是使用position: fixed
位置：固定；可能是一个选择，但我如何让它居中和响应？
要使元素在 x 轴上居中，您可以使用 right: 50%; translate:50% 0;

标签： javascript html css responsive-design

【解决方案1】：

* {
  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;
  }
}

@media only screen and (min-width: 769px) {
#menu-toggle {
    right: unset;
    position: relative;
    top: -30px;
}
}

@media only screen and (min-width: 769px){
#menu {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    right: unset;
}
}

<!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>

这看起来如何？

我在你的 CSS 块的末尾添加了以下 CSS

 @media only screen and (min-width: 769px) {
    #menu-toggle {
        right: unset;
        position: relative;
        top: -30px;
    }
}

@media only screen and (min-width: 769px){
    #menu {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        right: unset;
    }
}

【讨论】：