htmlcssnav

navbar using a checkbox


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.


Solution

  • #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>