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

Question

[stasbass]

Как сделать чтобы меню гамбургер закрывалось при клике на ссылку и в пустом месте экрана?
HTML:

<nav role="navigation">
			<div class="menu-toggle"><span>Menu</span></div>
			<ul class="menu">
			  <li><a href="#section0"><span>Главная</span></a></li>
			  <li><a href="#section2"><span>О нас</span></a></li>
			  <li><a href="#section4"><span>Фото / Видео</span></a></li>
			  <li><a href="#section6"><span>Контакты</span></a></li>
			</ul>
		  </nav>

CSS:

nav {
  top: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  position: absolute;
}
nav .menu {
  top: 0;
  left: 0;
  margin: 0;
  z-index: 1;
  width: 100%;
  background: #FF7012;
  padding: 3em 0 2em;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(1, 0.5, 0, 1);
}
nav .menu.active {
  transform: translateY(0);
}
nav .menu li {
  list-style: none;
}
nav .menu li a {
  padding: 1em;
  color: #fff;
  display: block;
  background: none;
  line-height: 1em;
  font-size: 1.125em;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease-in-out;
}
nav .menu li a span {
  border-bottom: 1px dotted #fff;
}
nav .menu li a:hover, nav .menu li a:focus, nav .menu li a:active {
  background: rgba(255, 255, 255, 0.2);
}

.menu-toggle {
  top: 24px;
  z-index: 2;
  right: 12px;
  width: 22px;
  height: 4px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
}
.menu-toggle span {
  height: 4px;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  background: #FF7012;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.3s ease-in-out;
}
.menu-toggle::before, .menu-toggle::after {
  left: 0;
  content: "";
  width: 22px;
  height: 4px;
  background: #FF7012;
  border-radius: 2px;
  position: absolute;
  transform-origin: center center;
  transition: width 0.2s ease-in-out, background 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, left 0.2s ease-in-out, right 0.2s ease-in-out;
}
.menu-toggle::before {
  top: 0;
}
.menu-toggle::after {
  bottom: 0;
}
.menu-toggle.menu-open span {
  background: rgba(255, 255, 255, 0);
}
.menu-toggle.menu-open::before {
  top: 8px;
  transform: rotate(-45deg);
}
.menu-toggle.menu-open::after {
  bottom: 8px;
  transform: rotate(45deg);
}
.menu-toggle.menu-open::before, .menu-toggle.menu-open::after {
  width: 26px;
  background: #fff;
}
.menu-toggle.menu-open:hover span, .menu-toggle.menu-open:focus span, .menu-toggle.menu-open:active span {
  background: rgba(255, 255, 255, 0);
}
.menu-toggle.menu-open:hover::before, .menu-toggle.menu-open:focus::before, .menu-toggle.menu-open:active::before {
  top: 8px;
  left: -3px;
  transform: rotate(-45deg);
}
.menu-toggle.menu-open:hover::after, .menu-toggle.menu-open:focus::after, .menu-toggle.menu-open:active::after {
  left: 9px;
  bottom: 8px;
  transform: rotate(45deg);
}
.menu-toggle.menu-open:hover::before, .menu-toggle.menu-open:hover::after, .menu-toggle.menu-open:focus::before, .menu-toggle.menu-open:focus::after, .menu-toggle.menu-open:active::before, .menu-toggle.menu-open:active::after {
  width: 18px;
}
.menu-toggle:hover span, .menu-toggle:focus span, .menu-toggle:active span {
  background: rgba(255, 255, 255, 0);
}
.menu-toggle:hover::before, .menu-toggle:focus::before, .menu-toggle:active::before {
  top: 8px;
  left: -3px;
  transform: rotate(45deg);
}
.menu-toggle:hover::after, .menu-toggle:focus::after, .menu-toggle:active::after {
  left: 9px;
  bottom: 8px;
  transform: rotate(-45deg);
}
.menu-toggle:hover::before, .menu-toggle:hover::after, .menu-toggle:focus::before, .menu-toggle:focus::after, .menu-toggle:active::before, .menu-toggle:active::after {
  width: 18px;
}

JavaScript:

var menu = document.querySelector(".menu"),
    toggle = document.querySelector(".menu-toggle");

function toggleToggle() {
  toggle.classList.toggle("menu-open");
};

function toggleMenu() {
  menu.classList.toggle("active");
};

toggle.addEventListener("click", toggleToggle, false);
toggle.addEventListener("click", toggleMenu, false);

Answer 1

[Роман Дворянов]

Если добавить еще один слушатель событий на документ, то можно закрывать при условии, что меню открыто:

function closeBurger() {
  if (menu.classList.contains("active")) {
    toggleMenu();
    toggleToggle();
  }
}

document.addEventListener('click', closeBurger, false);

Comments

[stasbass]

Я начинающий, к сожалению мне не совсем понятно

[Роман Дворянов]

stasbass, попробуйте заменить ваш js код на этот

var menu = document.querySelector(".menu"),
    toggle = document.querySelector(".menu-toggle");

function toggleToggle() {
  toggle.classList.toggle("menu-open");
}

function toggleMenu() {
  menu.classList.toggle("active");
}

function closeBurger() {
  if (menu.classList.contains("active")) {
    toggleMenu();
    toggleToggle();
  }
}

document.addEventListener('click', closeBurger, false);
toggle.addEventListener("click", toggleToggle, false);
toggle.addEventListener("click", toggleMenu, false);

[stasbass]

Роман Дворянов, меню перестало открываться

[Роман Дворянов]

stasbass, полный курс js в комментариях выкладывать такая себе идея, есть куча курсов, роликов и воркшопов, но давайте я объясню что я дописал, может это будет полезным

я добавил функцию закрытия бургера

function closeBurger() {
  if (menu.classList.contains("active")) { // Если меню содержит класс active, то срабатывает код ниже
    toggleMenu(); // переключается меню
    toggleToggle(); // переключается кнопка
  }
}

Затем я повесил на весь сайт событие закрытия меню при клике в любую область, но при клике на меню тоже, что в общем-то тоже норм

document.addEventListener('click', closeBurger, false);

[Роман Дворянов]

Хм, давайте тогда допишем функцию closeBurger, чтоб меню не закрывалось при нажатии на меню

function closeBurger(event) { // Тут добавился параметр event, это событие которое происходит в момент клика, и у него есть свойства, например место где произошло событие, цель - target

  // Тут добавляем проверку, если клик происходит по toggle элементу, то ничего не делаем
  if (event.target === toggle) {
    return;
  }

  if (menu.classList.contains("active")) {
    toggleMenu();
    toggleToggle();
  }
}

[Роман Дворянов]

stasbass, технически оно открывается и тут же закрывается, настолько быстро, что ничего не происходит, потому что не добавлена проверка по какому элементу происходит клик, я выше дописал функцию

[stasbass]

Роман Дворянов, не получается ничего.. В любом случае огромное вам спасибо!