How can I minimize JavaScript for a hamburger menu?

Question

I made a hamburger menu using HTML, CSS, and JS and it works perfectly fine but I want to minimize my JS logic.
I did some research on YouTube, but everyone has almost the same logic.
Look at my JS logic, can I minimize my JS logic?

If you have better short and simple JS logic then answer me.

HTML :

    <div class="menu-btn">
      <div class="hamburger"></div>
    </div>
    <div class="menu-list">
      <ul class="menu-items">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>

JS logic :

const hamburgerMenu = document.querySelector(".menu-btn");
const hamburger = document.querySelector(".hamburger");
const menuList = document.querySelector(".menu-list");
const homePage = document.getElementById("#home");

hamburgerMenu.onclick = () => {
  hamburger.classList.toggle("active");
  menuList.classList.toggle("active");
  hamburgerMenu.classList.toggle("active");
};
menuList.onclick = function (e) {
  if (e.target.classList !== "menu-btn") {
    hamburger.classList.remove("active");
    menuList.classList.remove("active");
    hamburgerMenu.classList.remove("active");
  }
};

Wenz

Answer 1

This is done a lot easier with HTML and CSS only.

Here is a bare minimum version to show the concept:

.menu-items {
  display: none;
}
.menu:hover>.menu-items {
  display: flex;
}

<div class="menu">
  <div class="hamburger">@</div>
  <nav class="menu-items">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#contact">Contact</a>
  </nav>
</div>

Here is a styled example with transition using transform: scale and opacity, to show that you can do it however you want.

.menu {
  width: max-content;
  height: 30px;
}

.hamburger {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transform: scale(.8);
  transform-origin: left;
}

.hamburger-line {
  height: 4px;
  width: 30px;
  margin-bottom: 3px;
  background: #59b;
  border-radius: 2px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  border: 1px solid #59b;
  border-radius: 3px;
  transform: scale(1, 0);
  transform-origin: top left;
  transition: .2s;
  opacity: 0;
}

.menu-items a {
  color: #222;
  font-size: 14px;
  font-family: sans-serif;
  padding: 10px;
  transition: .5s;
  text-decoration: none;
}

.menu-items a:hover {
  background: rgba(60, 110, 200, 0.2);
}

.menu:hover>.menu-items {
  transform: scale(1);
  opacity: 1;
}

<div class="menu">
  <div class="hamburger">
    <div class="hamburger-line"></div>
    <div class="hamburger-line"></div>
    <div class="hamburger-line"></div>
  </div>
  <nav class="menu-items">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#contact">Contact</a>
  </nav>
</div>

Weymouth

Answer 2

I created a no-JavaScript hamburger menu with :focus-within. I put the open icon (position: absolute) inside the nav, close icon (also position: absolute) outside the nav. Then I enabled the visibility of the nav only if it’s :focus-within, disabled the visibility of the open icon when the nav is :focus-within and enabled the visibility of the close icon only when the nav is :focus-within (with +).

Regelation

Answer 3

This Will work

document.querySelector(".menu-btn").onclick = () => {
    document.querySelector(".hamburger").classList.toggle("active");
    document.querySelector(".menu-list").classList.toggle("active");
    hamburgerMenu.classList.toggle("active");
};

document.querySelector(".menu-list").onclick = (e) => {
    if (e.target.classList !== "menu-btn") {
        var classes = [".hamburger", ".menu-list", ".menu-btn"];
        classes.forEach(function(item, index) { document.querySelector(item).classList.remove("active"); });
    }
};

But i don't recommend this because sometimes it gets confusing

Apuleius