checkbox-activated navigation bar

Question

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it.

Here is the code snippet:

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

And here is the accompanying CSS code:

.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 suspect that the issue lies somewhere in the last CSS block under #check, but I'm having trouble pinpointing exactly what's causing the problem.

html css nav

Answer 1

Answer №1

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

will not perform any changes on

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

the reference is on

#check

which are two distinct selectors. Hence, the left: 0 applied only to #check, not to .nav-items

UPDATE: here's how I would approach 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>

Answer 2

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

will not perform any changes on

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

the reference is on

#check

which are two distinct selectors. Hence, the left: 0 applied only to #check, not to .nav-items

UPDATE: here's how I would approach 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>

Answer 3

Answer №2

Hey there! I've encountered an interesting issue with the checkbox navigation hack, particularly noticeable on smaller touch devices.

Even when the navigation menu is closed, you can still click on links that are in the background (thanks to z-index).

Interestingly, the links are also clickable on the left side of the page, next to the heading where the text slides in from for the menu.

If you have a solution or workaround for this problem, please let me know. Thank you!

Check out my code here

My code is too lengthy to paste here, but you can view it at the link above.

Answer 4

Hey there! I've encountered an interesting issue with the checkbox navigation hack, particularly noticeable on smaller touch devices.

Even when the navigation menu is closed, you can still click on links that are in the background (thanks to z-index).

Interestingly, the links are also clickable on the left side of the page, next to the heading where the text slides in from for the menu.

If you have a solution or workaround for this problem, please let me know. Thank you!

Check out my code here

My code is too lengthy to paste here, but you can view it at the link above.

checkbox-activated navigation bar

Answer №1

Answer №2

Similar questions

CSS - Struggling to center an element with absolute positioning in IE

Utilizing CSS classes and IDs for unordered lists

Eliminate HTML nodes that are not currently visible

Methods for concealing the title and date when printing web content using JavaScript

Exploring the ways to access inner contents of a Div element using ajax

jQuery registers the enter event, but does not proceed to trigger the enter action

Distinguish between individuals who are sharing login credentials

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

Centered image

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

The importance of CSS z-index in optimizing for mobile responsiveness

Assistance with HTML and CSS to position an image in the corner

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

Utilizing several carets in a single or multiple text areas and input boxes

Ways to extract information from JSON files

Finding the value of a span tag using a specific CSS class with jQuery

Deleting Data with HTML Using the HTTP DELETE Method

How can I detect when an image is loaded in a specific container division using jQuery?

Implement a hover effect on a specific class targeting a nested element using JavaScript

Different ways to position two header tags on top of each other instead of next to each other