Закрытие меню по клику на пустое место?

Question

[valgerofficial]

Привет всем друзья, делаю обычное боковое меню.. но вот знаний скажем.. 10% Подскажите как заставить закрываться меню когда пользователь кликает по пустому месту на странице?

Comments

[ой всё]

а как вы закрываете верхнее?

[Kovalsky]

Было в симпсонах на тостере сто раз, пользуйтесь поиском.

[valgerofficial]

ой всё, Нет верхнего меню, есть только боковое.

[ой всё]

Александр Вальгер, ну а как бы вы сделали верхнее?

[Олег]

Подобных примеров ПОЛНО В ИНТЕРНЕТ.

Answer 1

[Антон]

Решение писать не буду кодом, но дам логику:
Что есть пустое место? Это любое другое место, отличное от нашего блока...Поэтому клик должен быть в место, которое не равно нашему блоку, в противном случае ничего не делать.
Вуаля!

Answer 2

[Виктор Янышев]

Всплытие событий смотри

Answer 3

[Maks_ Semenduk;]

Создай меню внутри прозрачного элемента размером во весь экран и напиши следующий js-код
html:

<div style="width:100vw; height:100vh;" class="menu" id="прозрачный_элемент">
    <div id="меню"></div>
</div>
<!--Лучше не использовать русский язык в идентификаторах(да и вообще в любом коде), но я написал для наглядности \_(-_-)_/ -->

js:

кнопка_меню.addEventListenner("click",()=>{
    прозрачный_элемент.style.display = "block"; 
})

прозрачный_элемент.addEventListenner("click",(e)=>{
    if(e.target == прозрачный_элемент){
        прозрачный_элемент.style.display = "none";
    }
})

С этим способом transition не работает, но этот недочет можно обойти с помощью setTimeout