Is there a way to toggle a checkbox input with another element with CSS?

Question

I made a pure CSS hamburger menu for the mobile version of my website, which would have been perfect, however, it is a one-page website and all of the links on the menu are ids of other sections on the page. Since the page doesn't refresh or open another page, the menu doesn't close. Does anyone know a way to make the menu close with CSS or even Javascript? I've exhausted all of my resources.

<input type="checkbox" class="burger-toggle" id="burger-toggle">
<label for="burger-toggle" class="burger" id="burger-toggle">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</label>
  <nav class="nav" id="nav">
    <ul class="menu" id="menu">
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

</header>

CSS

    #burger-toggle:checked ~ nav {
    width: fit-content;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

Here's how to make a links close the menu: jsfiddle.net/zkx2ra41/1 — user5734311
– user5734311, Commented Jun 11, 2021 at 14:29

BOZ · Accepted Answer · 2021-06-11 14:19:27Z

0

You can probably do it like this.

document.querySelector('#menu a').addEventListener('click', closeHamburger);

function closeHamburger() {
  document.querySelector('#burger-toggle').checked = false;
}

But remember to set aria-hidden="true" when you misuse (out of purpose) form elements.

answered Jun 11, 2021 at 14:19

BOZ

2,02013 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daphaz · Accepted Answer · 2021-06-11 15:21:55Z

I agree with @BOZ , but I don't think that using an input is the right way for a hamburger menu.

Then it should appear only for the mobile, so let's say width 768px

you can also use 2 separate nav one for mobile and the other for big screen and play with display: none; or visibility: hidden;

And use a css class to change the behavior of your navigation in this example the class isopen

var burger = document.querySelector(".burger");
var nav = document.querySelector(".nav");
var close = document.querySelector(".close");
var screenSize = document.querySelector(".screen__size");

burger.addEventListener("click", function () {
  nav.classList.add("isopen");
});
close.addEventListener("click", function () {
  nav.classList.remove("isopen");
});

//This is just for pixel width display
window.addEventListener("resize", function () {
  screenSize.innerHTML = window.innerWidth + "px";
});
window.onload = function () {
  screenSize.innerHTML = window.innerWidth + "px";
};

body {
  display: flex;
  justify-content: center;
  align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 100%;
    max-width: 1440px;
    padding: 0 1rem;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.nav {
    margin-left: auto;
    transition: transform 0.4s ease;
}
.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    text-transform: uppercase;
    font-size: 1.2rem;
}
.menu li:not(:last-child) {
    margin-right: 1rem;
}

button {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
}
.burger {
    position: absolute;
    width: 20px;
    height: 15px;
    margin-right: auto;

    visibility: hidden;
}
.bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
}
.bar:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bar:last-child {
    top: inherit;
    bottom: 0;
}
.nav.isopen {
    transform: translateY(0);
}

.close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2.2rem;
    visibility: hidden;
}

.screen__size {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .burger,
    .close {
        visibility: visible;
    }

    .nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color: lightblue;
        transform: translateY(-100%);
    }

    .nav ul {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        list-style-type: none;
    }

    .nav li:not(:last-child) {
        margin-bottom: 1rem;
    }
}

<header>
  <button class="burger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <nav class="nav">
    <button class="close">X</button>
    <ul class="menu">
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<div class="screen__size"></div>

Collectives™ on Stack Overflow

Is there a way to toggle a checkbox input with another element with CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related