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

Answer 1

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>