Question

我知道我已经创建了与此类似的问题，但是我想我在上一个问题中还不够清楚。我仍然在学习，并且已经进行了数小时的研究，并且碰壁了。我真的非常感谢您的帮助。

这是我的网站的最大宽度：

这里的一切都很好，没有错。

现在这是我的网站，最大宽度为767像素时：

这里也没有错。当我的网站的最大宽度为767px时，您会看到一个菜单按钮出现在左上方（如上图所示）。

我希望这样，当我单击该菜单按钮时，导航栏将扩展到页面底部，并显示第一张图像中显示的菜单按钮。

这是一个更好理解的蓝图：

我应该怎么做？我是否创建两个导航栏？我只坚持一个导航栏吗？

到目前为止，这是我的代码...

<body>
<div class="wrapper">
  <nav id="first-nav">
    <div class="first-nav-bar">
      <ul>
        <li><button onclick="expandNav()"><i class="fal fa-bars"></i></button></li>
        <li><a href="#"><i class="fab fa-connectdevelop"></i></a></li>
        <li><a href="#">Ban</a></li>
        <li><a href="#">Warn</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Records</a></li>
        <li><a href="#">Moderator</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Edit</a></li>
        <li><a href="#"><i class="fas fa-user-circle"></i></a></li>
        <li><a href="#"><i class="fal fa-sign-out-alt"></i></a></li>
      </ul>
    </div>
  </nav>
  <nav id="second-nav">
    <div class="second-nav-bar">
      <ul>
        <li><a href="#">Ban</a></li>
        <li><a href="#">Warn</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Records</a></li>
        <li><a href="#">Moderator</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Edit</a></li>
        <li><a href="#">Account</i></a></li>
        <li><a href="#">Sign Out</i></a></li>
      </ul>
    </div>
  </nav>
  <div class="main-content">

  </div>
</div>
<script>

</script>

body {
  margin: 0;
  padding: 0;

  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  height: 100%;
}

.first-nav-bar {
  width: 82%;
}

#first-nav {
  display: flex;
  justify-content: center;

  height: 44px;

  background: #040406;
}

#first-nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;

  height: 44px;
  padding: 0;
  margin: 0;

  list-style-type: none;
}

#first-nav a {
  display: inline;

  color: white;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

#first-nav  ul li:first-child {
  display: none;
}

#first-nav ul li:nth-child(2) i {
  font-size: 22px;
}

#first-nav ul li:nth-child(2):hover a {
  color: dodgerblue;
}

#first-nav ul li:hover a {
  color: #939393;
}

#first-nav ul li:nth-child(9) i, ul li:last-child i {
  font-size: 18px;
}

.main-content {
  height: calc(100vh - 44px);
  width: 100%;
  background: #131218;
}

#second-nav {
  display: none;
}

@media (max-width: 767px) {
  #first-nav ul button {
    border: none;
    background: none;
    transition: 0.3s;
    font-size: 18px;
    color: white;
  }

  #first-nav ul li:first-child {
    display: flex;
    border: none;
  }

  #first-nav ul li:nth-child(3), #first-nav ul li:nth-child(4), #first-nav ul li:nth-child(5), #first-nav ul li:nth-child(6),
  #first-nav ul li:nth-child(7), #first-nav ul li:nth-child(8), #first-nav ul li:nth-child(9), #first-nav ul li:nth-child(10) {
    display: none;
  }

  #second-nav {
    display: flex;
    justify-content: center;

    height: 100vh;

    background: black;
  }

  #second-nav ul {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-direction: column;

    height: 100%;
    width: 100vh;
    padding: 0;
    margin: 0;

    list-style-type: none;
  }

  #second-nav li {
    margin-bottom: 40px;
  }

  #second-nav a {
    color: white;
    font-weight: lighter;
    font-size: 20px;
    text-decoration: none;
    transition: 0.3s;
  }
}

您可能会说，我尝试使用两个导航栏，但未成功。您还会注意到，我自己尝试过但失败了，只是以为我愿意分享自己的工作，以表明我已经尝试过。

注意：我正在尝试获取它，以便仅在按下按钮时才显示菜单。

Answer 1

要使导航项不在页面上居中，必须删除justify-content: center;。

justify-content: center;将使所有项目在弹性框容器内居中。

为了隐藏菜单，以便除非菜单打开，否则菜单才会显示。我尝试使用display: none;隐藏该菜单。

如何使导航栏从顶部下拉到占据整个页面？

1 个答案: