使用复选框的导航栏

Question

尝试创建一个在选中复选框时打开的导航抽屉，一切都很好，但打开部分卡在了

HTML

<div class="leftside">
    <input type="checkbox" id="check" name="check">
    <label for="check" class="checkbtn">
        <i class="fas fa-bars icon navburger"></i>
    </label>
</div>
<div class="nav-items">
     ...
</div>

CSS

.nav-items{
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    left: -100%;
    display: flex;
    z-index: 10001;
    background-color: #fff;
    flex-direction: column;
    transition: all .5s;
}
#check{
    display: none;
}
#check:checked ~ .nav-items {
    left: 0;
}

我认为 #check 的最后 css 代码有问题，但我不知道为什么。

Answer 1

#check:checked ~ ul{
    left: 0;
}

不会在

处进行操作

.nav-items{
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    left: -100%; <------------
    display: flex;
    z-index: 10001;
    background-color: #fff;
    flex-direction: column;

你的参考。在

#check

这是两个不同的选择器。所以你正在做 left: 0 仅在 #check、不在在 .nav-items

更新：这就是我如何用 JS 做到这一点 https://codesandbox.io/s/admiring-ritchie-01rxu?file=/index.html:0-1383

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .nav-items {
        width: 100%;
        height: 100vh;
        position: fixed;
        overflow: hidden;
        display: flex;
        left: -100%;
        z-index: 10001;
        background-color: #fff;
        flex-direction: column;
        transition: all 0.5s;
      }
      #check:checked ~ ul {
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="leftside">
      <input type="checkbox" id="check" name="check" />
      <label for="check" class="checkbtn">
        <i class="fas fa-bars icon navburger"></i>
      </label>
    </div>
    <div class="nav-items">
      <ul>
        <li>lala</li>
        <li>lala</li>
        <li>lala</li>
        <li>lala</li>
        <li>lala</li>
      </ul>
    </div>
    <script>
      const checkbox = document.querySelector("#check");
      const nav = document.querySelector(".nav-items");
      checkbox.addEventListener("change", () => {
        console.log(checkbox.checked);
        if (checkbox.checked) {
          nav.style.left = "0";
        } else {
          nav.style.left = "-100%";
        }
      });
    </script>
  </body>
</html>

使用复选框的导航栏

navbar using a checkbox

html

css

nav