how to use :checked for responsive navbar using css

Question

I have added a checkbox with the class checkButton.

      <div class="hamburger">
        <input type="checkbox" id="check"/>
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>
    </div>
    <div>
      <ul class="navItems">
        <li><a href="#home" class="navItem active">HOME</a></li>
        <li><a href="#services" class="navItem">SERVICES</a></li>
        <li><a href="#projects" class="navItem">PROJECTS</a></li>
        <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
        <li><a href="#contact" class="navItem">CONTACT</a></li>
      </ul>
    </div>

Then I added some CSS for how it should look when clicked.

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

Can you please tell me how to use :clicked and link it so that my ul changes on clicking the checkButton class. Here's what I did and it's not working.

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

When it is checked, it must bring right: 0; in ul.

.checkButton:checked ~ ul{
    right: 0%;
}

where is `ul` placed in the html ? what should happen after the checkbox is checked ? — MajiD, Dec 28 '20 at 10:50
if you need to show the menu on click, it need a little bit of javascript. just show me where your `ul` placed in the html so i can help you — MajiD, Dec 28 '20 at 10:57

score 2 · Answer 1 · answered Dec 28 '20 at 11:02

The General Sibling Combinator references a sibling of the element on the left.

Your ul is not a sibling of your input. It is a child of a sibling of the input's grandparent (or first cousin, once removed).

There is no way to select the ul from the input so to get this to work, you'd need to rearrange your markup.

… but don't. CSS alone is not a good tool for this problem. Use JavaScript. Take advantage of accessibility tools like ARIA.

MajiD · Accepted Answer · 2020-12-28T11:39:21.747

This should work

var check = document.querySelector('.hamburger > .checkButton');
var menu = document.querySelector('.navItems');

check.addEventListener('click', function(e) {
  e.preventDefault();
  menu.classList.toggle('show');
});

ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 0;
  right: 100%;
  background-color: #e54136;
  transition: all .5s;
}

ul.show {
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div class="hamburger">
  <button class="checkButton">
      <i class="fas fa-bars"></i>
  </button>
</div>
<ul class="navItems">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

score 1 · Answer 3 · answered Dec 28 '20 at 11:23

Here is a very simple example of how it should work without JS:

label {
  cursor:pointer;
}
input +  nav {
  visibility:hidden;
}
input:checked + nav {
  visibility:visible;
}

<label for="a1">Hamburger button, click me</label>
<input type="checkbox" id="a1">
<nav>Hidden menu</nav>

score 0 · Answer 4 · answered Dec 28 '20 at 11:48

ul ~ p Selects every element that are preceded by a

element. For better understanding read https://www.w3schools.com/cssref/css_selectors.asp

but if u dont want to use js of jQuery

here is the code with checkbox

ul.navItems{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }
    .hamburger input:checked + ul.navItems {
        right: 0%;
    }

<div>
    <div class="hamburger">
        <input type="checkbox" id="check"/>
        <ul class="navItems">
            <li><a href="#home" class="navItem active">HOME</a></li>
            <li><a href="#services" class="navItem">SERVICES</a></li>
            <li><a href="#projects" class="navItem">PROJECTS</a></li>
            <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
            <li><a href="#contact" class="navItem">CONTACT</a></li>
        </ul>
    </div>
</div>

how to use :checked for responsive navbar using css

4 Answers4