How to toggle menu visibility

user_10591501 0
Viewed 247

I am trying to code a burger menu that will change symbol from "-" to "x" on click and also show menu.

I'm done with the first part. The symbol is changed / toggled on click but I can't figure out how to display the menu.

This is working code I have

const menuButton = document.querySelector(".menu-button");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    showMenu = false;
  }
}

What I need to do is that when you click on ".menu-button" it will change from this:

<div class="menu-body">...</div>

to this:

<div class="menu-body show-menu-body">...</div>

Any ideas? Thank you in advance for your time

javascript
4 Answers

Similar to what you already have, toggle a class to the Menu element too:

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menu.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
     menu.classList.remove("show-menu-body");
    showMenu = false;
  }
}

or this way using Element.classList.toggle():

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");
let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

function toggolmenu() {
  showMenu = !showMenu;
  menuButton.classList.toggle("close", showMenu);
  menu.classList.toggle("show-menu-body", showMenu);
}

Control state using a hidden checkbox

Here's an example without JavaScript at all, just a checkbox and CSS :checked pseudo.
To than target and style the next elements use the General Sibling Combinator selector ~

/* QuickReset */ * {margin:0; box-sizing:border-box;}

#menu-toggler {
  position: absolute;
  opacity: 0;
}
#menu-btn {
  position: fixed;
  z-index: 101;
  padding: 10px;
  font-size: 2em;
  cursor: pointer;
}
#menu-btn:before {
  content: "\2630";
}
#menu {
  position: fixed;
  z-index: 100;
  top:0;
  bottom: 0;
  left: 0;
  min-width: 200px;
  transition: 0.5s;
  transform: translateX(-100%);
  padding-top: 4em;
  background: #f48024;
}

/* CHECKED STATES */
#menu-toggler:checked ~ #menu-btn:before {
  content: "\2715";
}
#menu-toggler:checked ~ #menu {
  transform: translateX(0);
}
<input id="menu-toggler" aria-controls="menu" type="checkbox">

<label id="menu-btn" for="menu-toggler" aria-controls="menu-tog" aria-label="Toggle Menu"></label>

<nav id="menu">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
</nav>

user_3839040

let me know if this works. :)

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body"); // grab the menu element

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menuBody.classList.remove("show-menu-body");  // when menu is closed we remove the class
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.add("show-menu-body"); // when menu is open we add the class
    showMenu = false;
  }
}
user_115796920

Try this:

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body");

let showMenu = false;

function toggleMenu() {
  if (showMenu === false) {
    menuButton.classList.add("close");
    menuBody.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.remove("show-menu-body");
    showMenu = false;
  }
}

menuButton.addEventListener("click", toggleMenu);

Of course, .show-menu-body must have something like display: block; to override a .menu-body with display: none;. I followed your path, but you have several options to achieve this (and also add CSS transitions to improve the switch).

.menu-body {
  display: none;
}

.show-menu-body {
  display: block;
}
user_53809850

you will need to get that element by ID and then add class to it like this

document.getElementById("MyElement").classList.add('show-menu-body');

For this code to work you will need to add ID to that div. But it must be unique.

user_69316660
Related