Как добавить / переключить класс к элементу, чтобы переключить меню Гамбургера на X, чтобы закрыть и снова вернуться

Question

Я пытаюсь использовать vanilla JavaScript, чтобы переключить меню гамбургера на X и затем снова вернуться.Я хочу использовать только vanilla js, а не JQuery.

Я включил код, чтобы показать, что я пробовал.Я пытаюсь получить класс '.open', который будет добавлен / переключен, когда я "открою" меню.Но безрезультатно.

Вот мой код:

const navToggle = document.getElementById('nav-toggle');
navToggle.addEventListener('click', () => {
  if (navToggle.classList)
    navToggle.classList.add('open');
  else
    navToggle.className += ' ' + open;
  // navToggle.style.display('open');
});

*,
html {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: #333;
  -webkit-font-smoothing: antialiased;
}

img.logo-header {
  width: 10rem;
  height: 10rem;
}

.header-wrapper {
  border: 1px solid black;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.logo-header {
  grid-column: 1;
}


/* Navbar */

.nav-header {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}


/* Navbar Hamburger Menu */

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin: 0 0 1em 1em;
}

nav a {
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  /* Change Color  */
  color: #000;
}

.nav-toggle:checked~nav {
  transform: scale(1, 1);
}

.nav-toggle:checked~nav a {
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out 250ms;
  -o-transition: opacity 250ms ease-in-out 250ms;
  transition: opacity 250ms ease-in-out 250ms;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 4em;
  right: 0;
  margin-right: 1em;
  height: auto;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: .125em;
  width: 2.15em;
  border-radius: .125em;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: .5em;
}

.nav-toggle-label span::after {
  top: .5em;
}

.open .nav-toggle {
  transform: rotate(45deg);
}

.open .nav-toggle::before {
  opacity: 0;
}

.open .nav-toggle::after {
  transform: translateY(-3px) rotate(-90deg);
}

<div class="header-wrapper">
  <img class="logo-header" src="./assets/img/logo.png" alt="">

  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav class="nav-header">
    <ul>
      <li class="nav-item"><a href="">Ministries</a></li>
      <li class="nav-item"><a href="">About</a></li>
      <li class="nav-item"><a href="">Contact</a></li>
      <li class="nav-item"><a href="">Book</a></li>
    </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label"><span></span></label>

</div>

Я хочу, чтобы меню гамбургера исчезло и превратилось в X, а затем снова нажмите на гамбургер, если щелкнуть снова.Прямо сейчас все, что происходит, - это то, что меню появляется и исчезает при нажатии, но не более того.Хотелось бы, чтобы был переход от гамбургера к X. Ничего сверхъестественного.

Answer 1

  const navToggle = document.getElementById('nav-toggle');
  navToggle.addEventListener('click', () => {
    //This is a better way to toggle classes
    navToggle.classList.toggle('open')
  });

*, html {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: #333;
  -webkit-font-smoothing: antialiased;
}

img.logo-header {
  width: 10rem;
  height: 10rem;
}

.header-wrapper {
  border: 1px solid black;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.logo-header {
  grid-column: 1;
}


/* Navbar */

.nav-header {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* Navbar Hamburger Menu */

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin: 0 0 1em 1em;
}

nav a {
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
	color: white;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  /* Change Color  */
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out 250ms;
  -o-transition: opacity 250ms ease-in-out 250ms;
  transition: opacity 250ms ease-in-out 250ms;
}

/* Make middle bar invisible */

.nav-toggle:checked ~ .nav-toggle-label > span {
	background-color: transparent;
}

/* Rotate and translate the top and bottom bar */

.nav-toggle:checked ~ .nav-toggle-label > span::before {
	transform: translateY(0.5em) rotate(45deg)
}

.nav-toggle:checked ~ .nav-toggle-label > span::after {
	transform: translateY(-0.5em) rotate(-45deg)
}

.nav-toggle {
  display: none;
}

/* Fixed height of the box so that it covers the whole switch/button */

.nav-toggle-label {
  position: absolute;
  top: 2.925em;
  right: 0;
  margin-right: 1em;
  height: 2.15em;
  display: flex;
  align-items: center;
}

/* Added transition */

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: .125em;
  width: 2.15em;
  border-radius: .125em;
  position: relative;
  transition: transform 0.2s, background-color 0.2s;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: .5em;
}

.nav-toggle-label span::after {
  top: .5em;
}

.open .nav-toggle {
  transform: rotate(45deg);
}

.open .nav-toggle::before {
  opacity: 0;
}

.open .nav-toggle::after {
  transform: translateY(-3px) rotate(-90deg);
}

<div class="header-wrapper">
    <img class="logo-header" src="./assets/img/logo.png" alt="">

    <input type="checkbox" id="nav-toggle" class="nav-toggle">
      <nav class="nav-header">
        <ul>
          <li class="nav-item"><a href="">Ministries</a></li>
          <li class="nav-item"><a href="">About</a></li>
          <li class="nav-item"><a href="">Contact</a></li>
          <li class="nav-item"><a href="">Book</a></li>
        </ul>
      </nav>
      <label for="nav-toggle" class="nav-toggle-label"><span></span></label>

  </div>

Вот, пожалуйста,

https://codepen.io/anon/pen/YMoEwX

Используя transform: rotate() translateY(), я делаю верхнюю и нижнюю полосу в X, а также делаю среднюю полосу невидимой.

Я также выбрал высоту переключателя / кнопки и ваш JavaScript.