Закрытие меню по клику на пустое место?
Решение писать не буду кодом, но дам логику:
Что есть пустое место? Это любое другое место, отличное от нашего блока...Поэтому клик должен быть в место, которое не равно нашему блоку, в противном случае ничего не делать.
Вуаля!
Создай меню внутри прозрачного элемента размером во весь экран и напиши следующий 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