navbar using a checkbox

user_9813572 0
Viewed 1417

trying to create a Nav-drawer that opens when a checkbox is checked, all great but the opening part is where am stuck at

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;
}

I believe that its a problem in the last css code of #check but i cant figure out why.

nav css html
1 Answers
#check:checked ~ ul{
    left: 0;
}

will not do a manipulating at

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

your ref. is on 

#check

that's two different selectors. so you are doing a left: 0 only at #check, not at .nav-items

UPDATE: this is how i would do this with 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>
user_71279910
Related