2

Подскажите, пожалуйста, как при клике вне меню закрыть его?

const btnMenu = document.querySelector('.menu__btn')
const menu = document.querySelector('.menu__list')
const toggleMenu = function () {
    menu.classList.toggle('open')
}

btnMenu.addEventListener('click', function (e) {
    e.stopPropagation()
    toggleMenu()
})

document.addEventListener('click', function (e) {
    const target = e.target
    const its_menu = target == menu || menu.contains(target)
    const its_btnMenu = target == btnMenu
    const menu_is_active = menu.classList.contains('open')

    if (!its_menu && !its_btnMenu && menu_is_active) {
        toggleMenu()
    }
})
.hamburger-menu {
  display: block;
  position: relative;
}

#menu__toggle {
  display: block;
}

#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~.menu__list {
  visibility: visible;
  left: 0;
}

// .open {
//  visibility: visible;
//  left: 0;
// }
.menu__btn {
  // display: flex;
  align-items: center;
  position: absolute;
  top: 40px;
  left: calc(100% - 35px);
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
  // @include flex($horizontal:flex-end);
}

.menu__btn>span,
.menu__btn>span::after {
  display: block;
  position: absolute;
  width: 26px;
  height: 3px;
  background: #ffffff;
  border-radius: 5px;
  transition-duration: 0.25s;
}

.menu__btn>span::before {
  display: block;
  position: absolute;
  content: '';
  top: -8px;
  width: 15px;
  height: 3px;
  background: #ffffff;
  border-radius: 5px;
}

.menu__btn>span::after {
  content: '';
  top: 8px;
}

.menu__list {
  // display: none;
  position: absolute;
  /*    visibility: hidden; */
  top: 0px;
  left: -100%;
  // left: 20px;
  width: 292px;
  // padding: 80px 0;
  transition-duration: 0.25s;
  //  pointer-events: none;
  margin-left: 14px;
  list-style: none;
}

.menu__list .open {
  visibility: visible;
}

.menu__link {
  display: block;
  padding: 29px 50px 21px 35px;
  font-size: 26px;
  color: #ffffff;
  font-family: $fontFamilyM;
  text-decoration: none;
  transition-duration: 0.25s;
  background: #333333;
  border-bottom: 3px solid #3b3b3b;
  position: relative;
}

.menu__item-last::after {
  content: '';
  position: absolute;
  width: 292px;
  height: 14px;
  background: #333333;
}

.menu__link:active {
  color: $violetColor;
}

.menu__item:active .menu__link::after {
  opacity: 1;
}

.menu__link::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 53px;
  background: $violetColor;
  left: 0px;
  top: calc((100% - 53px) / 2);
  opacity: 0;
}
<div class="hamburger-menu">
                    <input id="menu__toggle" type="checkbox" />
                    <label class="menu__btn menu__btn--active" for="menu__toggle">
                        <span></span>
                    </label>

                    <ul class="menu__list">
                        <li class="menu__item"><a class="menu__link" href="#">Overview</a></li>
                        <li class="menu__item"><a class="menu__link" href="#">About Fork</a></li>
                        <li class="menu__item"><a class="menu__link" href="#">Buying Options</a></li>
                        <li class="menu__item menu__item-last">
                            <a class="menu__link" href="#">Support</a>
                        </li>
                    </ul>
                </div>

1 ответ 1

1

При нажатии кнопок меню, меню не должно закрываться? Тогда, может быть, так:

   const btnMenu = document.querySelector('.menu__btn');
        const menu = document.querySelector('.menu__list');
        const menuToggle = document.querySelector('#menu__toggle');

   /*     const toggleMenu = function () {
             menu.classList.toggle('open');
        } */

       btnMenu.addEventListener('click', function (e) {
            e.stopPropagation()
            toggleMenu()
        }) 

        function onDocumentClick(e) {
            const target = e.target
            const its_menu = target == menu || menu.contains(target)
            console.log(`its_menu =${its_menu} ${menu.contains(target)}`);
            const its_btnMenu = target == btnMenu
            const menu_is_active = menuToggle.checked//menu.classList.contains('open')
            if (!its_menu && !its_btnMenu && menu_is_active && target !=menuToggle) {
                //toggleMenu();
                menuToggle.checked = false;
            }

        }
       document.addEventListener('click', onDocumentClick);
1
  • Спасибо огромное, сработало))))
    – Stud
    19 фев 2022 в 10:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.