css 导航栏使用复选框

vwkv1x7d 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(150)

我试着创建一个导航抽屉，当一个复选框被选中时打开，所有的伟大，但开放的一部分是我卡住了
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;
}

我相信这是一个问题，在最后的CSS代码的#检查，但我不知道为什么。

css

来源：https://stackoverflow.com/questions/61982749/navbar-using-a-checkbox

2条答案

按热度按时间

h4cxqtbf1#

#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

这是两个不同的选择器。因此，您只在#check处执行left: 0，而不是在.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>

赞(0）回复(0）举报 2023-06-25

olmpazwi2#

这里的复选框导航黑客工程，但我有一个奇怪的问题，它更明显的较小的触摸设备。
即使导航菜单处于关闭状态，您也可以点击后台的链接（使用z-index）。
你也会发现，链接是可点击的页面左侧，旁边的标题，这是文本滑入菜单的地方。
如果有人你有一个修复这个或知道如何解决这个问题，请回复。谢谢你。
https://codepen.io/thompsongeorge/pen/JjeRQxW

since the code is too large I haven't pasted it.

赞(0）回复(0）举报 2023-06-25

我来回答

css 导航栏使用复选框

2条答案

相关问题

热门标签

最新问答