При клике вне меню, закрывать его..уже голову сломала..ток начила изучать js ..пока сложно(

Рейтинг: 1Ответов: 2Опубликовано: 09.02.2023

function burgerMenu(selector) {
  let menu = $(selector);
  let button = menu.find('.burger-menu_button', '.burger-menu_lines');
  let links = menu.find('.burger-menu_link');
  let overlay = menu.find('.burger-menu_overlay');

  button.on('click', (e) => {
    e.preventDefault();
    toggleMenu();
  });

  links.on('click', () => toggleMenu());
  overlay.on('click', () => toggleMenu());

  function toggleMenu() {
    menu.toggleClass('burger-menu_active');

    if (menu.hasClass('burger-menu_active')) {
      $('body').css('overlow', 'hidden');
    } else {
      $('body').css('overlow', 'visible');
    }
  }
}

burgerMenu('.burger-menu');
.menu-btn {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu-btn>span,
.menu-btn>span::before,
.menu-btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  transition-duration: .25s;
}

.menu-btn>span::before {
  content: '';
  top: -8px;
}

.menu-btn>span::after {
  content: '';
  top: 8px;
}

.menubox {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: black;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

.menu-item {
  display: block;
  padding: 12px 24px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu-item:hover {
  background-color: #CFD8DC;
  color: black;
}

#menu-toggle {
  opacity: 0;
}

#menu-toggle:checked~.menu-btn>span {
  transform: rotate(45deg);
}

#menu-toggle:checked~.menu-btn>span::before {
  top: 0;
  transform: rotate(0);
}

#menu-toggle:checked~.menu-btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu-toggle:checked~.menubox {
  visibility: visible;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="burger-menu">
  <input id="menu-toggle" type="checkbox" />
  <label class="menu-btn" for="menu-toggle">
      <span></span>
    </label>
  <ul class="menubox">
    <li><a class="menu-item" href="#">Головна</a></li>
    <li><a class="menu-item" href="#">Про Нас</a></li>
    <li><a class="menu-item" href="#">Блог</a></li>
    <li><a class="menu-item" href="#">Архіви</a></li>
    <li><a class="menu-item" href="#">Контакти</a></li>
  </ul>
</div>

javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Обычно я делаю как-то так:

document.addEventListener('mouseup', function (e){
    var div = document.querySelector('.some-class');
    if (div !== e.target && !div.contains(e.target)) {
        div.classList.remove('opened');
    }
});

То есть, клик не по нужному элементу что-то там закрывает.

P.S. В вопрос не вникал, это скорее общий ответ.

▲ 0

Судя по стилям, меню открывается, когда активен чекбокс. Значит порядок действий такой:

  • Необходимо повесить обработчик клика на document, в котором нужно делать чекбокс неактивным.
  • Поскольку события имеют свойство всплывать, при таком подходе при нажатии на меню вышеописанное событие тоже будет срабатывать. Значит нам нужно прервать всплытие, чтобы оно не дошло до document, через stopPropagation().

Пример:

const menu = document.querySelector('.burger-menu');
const btn = document.querySelector('#menu-toggle');


menu.onclick = (e) => {
  e.stopPropagation();
}

document.onclick = (e) => {
  btn.checked = false;
}
.menu-btn {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu-btn>span,
.menu-btn>span::before,
.menu-btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  transition-duration: .25s;
}

.menu-btn>span::before {
  content: '';
  top: -8px;
}

.menu-btn>span::after {
  content: '';
  top: 8px;
}

.menubox {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: black;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

.menu-item {
  display: block;
  padding: 12px 24px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu-item:hover {
  background-color: #CFD8DC;
  color: black;
}

#menu-toggle {
  opacity: 0;
}

#menu-toggle:checked~.menu-btn>span {
  transform: rotate(45deg);
}

#menu-toggle:checked~.menu-btn>span::before {
  top: 0;
  transform: rotate(0);
}

#menu-toggle:checked~.menu-btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu-toggle:checked~.menubox {
  visibility: visible;
  left: 0;
}
<div class="burger-menu">
  <input id="menu-toggle" type="checkbox" />
  <label class="menu-btn" for="menu-toggle">
                      <span></span>
                    </label>
  <ul class="menubox">
    <li><a class="menu-item" href="#">Головна</a></li>
    <li><a class="menu-item" href="#">Про Нас</a></li>
    <li><a class="menu-item" href="#">Блог</a></li>
    <li><a class="menu-item" href="#">Архіви</a></li>
    <li><a class="menu-item" href="#">Контакти</a></li>
  </ul>
</div>