Breaking News: Grepper is joining You.com. Read the official announcement!

js change hamburger & show menu

Upset Unicorn answered on September 9, 2021 Popularity 1/10 Helpfulness 1/10

answer js change hamburger & show menu

related how to create a hamburger menu using javascript

js change hamburger & show menu

Comment

var menu = document.querySelector(".header__main-nav")
var ham = document.querySelector(".header__burger-container")

ham.addEventListener("click", toggleMenu)

function toggleMenu() {
  if (menu.classList.contains("header__main-nav--show")) {
    menu.classList.remove("header__main-nav--show");
    ham.classList.toggle("change");
  } else {
    menu.classList.add("header__main-nav--show");
    ham.classList.toggle("change")
  }
}

var menuLinks = document.querySelectorAll(".header__main-link")

menuLinks.forEach(
  function (menuLink) {
    menuLink.addEventListener("click", toggleMenu)
  }
)

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: codepen.io

Tags: javascript menu show

Link to this answer
Share Copy Link

Contributed on Sep 09 2021

Upset Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

how to create a hamburger menu using javascript

Comment

Here is one way you can create a hamburger menu using JavaScript:

1.Create the HTML structure for the hamburger menu. This could include a button element with a class of "hamburger" and a navigation element with a class of "nav":

<button class="hamburger">Menu</button>
<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

2.Use CSS to style the hamburger menu and hide the navigation by default. You can also use CSS to style the hamburger button and define the hamburger menu's toggle states (e.g., open and closed):

.nav {
  display: none;
}

.hamburger {
  display: block;
  cursor: pointer;
}

.hamburger.open .bar1,
.hamburger.open .bar2,
.hamburger.open .bar3 {
  width: 22px;
  background-color: #333;
}

.hamburger.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 4px);
  transform: rotate(-45deg) translate(-4px, 4px);
}

.hamburger.open .bar2 {
  opacity: 0;
}

.hamburger.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

3.Use JavaScript to toggle the hamburger menu's open and closed states when the button is clicked:

const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.nav');

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('open');
  nav.classList.toggle('open');
});

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: hamburger-menu hamb

Link to this answer
Share Copy Link

Contributed on Jan 09 2023

Hustler

0 Answers Avg Quality 2/10

js change hamburger & show menu

Contents

More Related Answers

js change hamburger & show menu

Closely Related Answers

how to create a hamburger menu using javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.