Как переключать открывать и закрывать меню

Question

Я пытаюсь создать слайд-меню, но я не знаю, как бы закрыть его.

По сути, я пытаюсь сделать что-то вроде этого сайта https://zero.nyc/

const menu = document.querySelector('aside');
const nav = document.querySelector('nav');

menu.addEventListener('click', () => {
  nav.style.marginLeft = '0';
  menu.style.left = '97vw';
})

aside {
  border-right: 1px solid #e2e2e2;
  width: 3vw;
  height: 100vh;
  line-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 1s;
}

nav {
  width: 97vw;
  height: 100vh;
  margin-left: -100vw;
  transition: 1s;
}

<aside>
  menu
</aside>
<nav>
  <ul>
    <li>Home</li>
    <li>ABOUT</li>
    <li>Contact</li>
  </ul>
</nav>

Answer 1

Используйте transform: translateX() вместо поля.Вы также должны написать некоторое состояние вашего меню, то есть открыто / закрыто.Вы можете использовать класс css для этого, и в вашем EventListener вы можете проверить, если меню opened, затем onClick анимировать от translateX(0) до translateX(-100%) и удалить opened class.

Или вы можетеписать стили с переходами или анимацией @keyframes, все будет работать.Сначала создайте идею сохранения открытого состояния.

Answer 2

Используйте классы CSS и включайте или выключайте их в своем методе click вместо установки стилей с помощью javascript.

Фрагмент:

const menu = document.querySelector('aside');
const nav = document.querySelector('nav');

menu.addEventListener('click', () => {
  nav.classList.toggle("margin");
  menu.classList.toggle("left");
})

aside {
  border-right: 1px solid #e2e2e2;
  width: 3vw;
  height: 100vh;
  line-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
}

nav {
  width: 97vw;
  height: 100vh;
  margin-left: -100vw;
  transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
}

.margin {
  margin-left: 0;
}

.left {
  left: 97vw;
}

<aside>
  menu
</aside>
<nav>
  <ul>
    <li>Home</li>
    <li>ABOUT</li>
    <li>Contact</li>
  </ul>
</nav>

Answer 3

Я бы создал классы css для переключения в вашем обработчике событий щелчка вместо ручного изменения стилей.

При нажатии вы в основном собираетесь:

1. Захватить элементы, которые выхотите изменить
2. Переключать классы с помощью classList.toggle (если вас не беспокоит

Преимущество использования классов в том случае, если вы удалите их, элемент просто возвращается,Он также более удобен в обслуживании, поскольку вам не нужно отслеживать стили, которые вы меняете.