Question

我正在尝试创建CSS导航菜单。我希望在小型设备中打开菜单时垂直排列链接。但是导航链接仍然水平放置。谁能告诉我为什么会这样，我该怎么做呢？预先感谢！

function navExpand() {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');


  burger.addEventListener('click', function() {
    //TOGGLE NAV
    nav.classList.toggle('nav-links-active');
  });
}

navExpand();

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  width: 100vw;
  height: 8vh;
  display: flex;
  color: rgb(226, 226, 226);
  background-color: rgb(30, 80, 210);
  font-family: calibri;
  justify-content: space-around;
  letter-spacing: 2px;
}

.logo {
  font-size: 30px;
  padding-top: 6.5px;
}

ul {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  float: right;
  text-transform: uppercase;
}

li {
  padding-left: : 30px;
  letter-spacing: 3px;
  padding-right: 30px;
  list-style: none;
  padding-top: 14px;
}

.burger {
  margin: 12px;
  display: none;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: rgb(30, 80, 210);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    vertical-align: middle;
  }
  .burger {
    display: block;
  }
  .nav-links-active {
    transform: translateX(0%);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <nav>
    <div class="logo">
      MENU
    </div>
    <div class="nav-links">
      <ul>
        <li class="links" id="home">
          <a href="#"></a>Home</li>
        <li class="links" id="about">
          <a href="#"></a>About</li>
        <li class="links" id="portfolio">
          <a href="#"></a>Portfolio</li>
        <li class="links" id="contact">
          <a href="#"> </a> Contact</li>
      </ul>
    </div>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
  <script src="main.js"></script>
</body>

</html>

当屏幕宽度小于768像素时，我希望隐藏链接，并且当用户单击切换按钮时，它们会垂直显示。

为什么CSS导航菜单中的链接没有垂直排列？

0 个答案: