导航栏在不同的屏幕尺寸上无法正常工作

Question

我正在尝试创建一个多屏幕兼容的导航栏（主要是移动和桌面用户）。我已经为导航栏创建了我想要的样式，但是，我有一个小问题：在中型设备（768px 或以下）上扩展导航栏然后关闭它时，如果用户将分辨率大小更改为 > 768px，侧面导航栏没有显示。

function sideNavAction() {
  let sidenav = document.getElementById("sideNavBar");
  console.log(window.getComputedStyle(sidenav).display);
  if (window.getComputedStyle(sidenav).display == "none") {
    sidenav.style.display = "block";
  } else {
    sidenav.style.display = "none";
  }
}

html,
body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Poppins", sans-serif;
}

.mobile-nav {
  height: 70px;
  width: 100%;
  position: fixed;
  background-color: darkblue;
  color: grey;
}

.nav-brand {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #1a1a27;
}

.nav-heading {
  display: inline-block;
}

.nav-heading h2 {
  color: white;
  white-space: nowrap;
}

.nav-icon {
  text-align: center;
}

.sidenav {
  display: none;
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: width 0.5s;
}

.sidenav .nav-brand {
  padding: 25px 20px;
  height: 50px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sidenav .nav-heading h2 {
  margin: 0;
  color: white;
  white-space: nowrap;
  opacity: 1;
  max-width: 0;
  transition: 0.16s;
}

#expand-icon {
  transition: transform 0.5s;
}

#sidenav-links {
  margin: 15px 0px;
}

.sidenav-links a {
  padding: 10px 18px;
  display: block;
  text-decoration: none;
  color: #9697aa;
  white-space: nowrap;
}

.link {
  display: inline-block;
  font-size: 20px;
  padding-left: 15px;
  vertical-align: middle;
  color: #9697aa;
  opacity: 1;
  max-width: 100vw;
}

.active {
  background-color: #1b1b28;
}

.active i {
  color: #5d78ff;
}

.active .link {
  color: white;
}

.fas {
  vertical-align: middle;
}

@media only screen and (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
  .sidenav {
    display: block;
  }

  .sidenav .nav-brand {
    display: flex;
  }

  .sidenav:not(:hover) {
    width: 75px;
  }

  .sidenav:not(:hover) .nav-heading h2 {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    transition: 0.1s 0.2s;
  }

  .sidenav:not(:hover) #expand-icon {
    transform: rotate(180deg);
  }

  .sidenav-links a:hover {
    background-color: #1b1b28;
    color: #5d78ff;
  }

  .sidenav-links a:hover .link {
    color: white;
    transition: none;
  }

  .sidenav:not(:hover) .link {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    transition: 0.1s 0.2s;
  }
}

@media only screen and (max-width: 768px) {
  .sidenav .nav-brand {
    display: none;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online CV</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />

    <script
      src="https://kit.fontawesome.com/6cc49d804e.js"
      crossorigin="anonymous"
    ></script>
    <script src="scripts.js"></script>
  </head>

  <body>
    <div class="mobile-nav">
      <div class="nav-brand">
        <div class="nav-heading">
          <h2>Navbar</h2>
        </div>

        <div class="nav-icon">
          <button onclick="sideNavAction()">
            <i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="sidenav" id="sideNavBar">
      <div class="nav-brand">
        <div class="nav-heading">
          <h2>Navbar</h2>
        </div>
        <div class="nav-icon">
          <i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
        </div>
      </div>

      <div class="sidenav-links">
        <a class="active" href="#">
          <i class="fas fa-fw fa-id-card fa-2x"></i>
          <p class="link">Link 1</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          <p class="link">Link 2</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-briefcase fa-2x"></i>
          <p class="link">Link 3</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          <p class="link">Link 4</p>
        </a>
      </div>
    </div>
  </body>
</html>

我意识到我的 JS 函数是造成这种情况的原因，因为它将侧导航的显示设置为 'none'，但我想不出一个优雅的解决方案。

Answer 1

你为什么不使用 Bootstrap "navbar" 组件？这是您的问题的解决方案。 Bootstrap 导航栏响应桌面和移动设备。您不需要在此处以像素为单位提及屏幕尺寸。这是 Bootstrap 库的 link。您必须通过给定 link 上的 Bootstrap CDN 将 Bootstrap 集成到您的 html 文档中。

https://getbootstrap.com/docs/4.4/components/navbar/

Answer 2

几件事。

内联事件监听器不受欢迎。最好通过 Javascript.
您添加了一个 display: none; 的麦粒肿，一旦宽度增加超过阈值，就没有事件监听器或媒体查询来更改它。

本codepen有以上调整：

https://codepen.io/riza-khan/pen/poJEOYE?editors=1111

并且应该按预期工作。

但是，我添加了媒体查询并使用 !important 标记定位导航 class。理想情况下，永远不要这样做。我建议删除 !important 并尝试使用代码，直到没有它也能正常工作。

希望对您有所帮助。

Answer 3

感谢@chriskirknielsen，我能够想出这个解决方案来解决我遇到的问题。

/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
  let sidenav = document.getElementById("sideNavBar");
  if (sidenav.classList.contains("sidenav-mobile-visible")) {
    sidenav.classList.remove("sidenav-mobile-visible");
  } else {
    sidenav.classList.add("sidenav-mobile-visible");
  }
}

然后将其添加到我的 css 文件中

.sidenav-mobile-visible {
  display: block;
}

导航栏在不同的屏幕尺寸上无法正常工作

Navbar not working properly on different screen size

html

javascript

css

responsive-design