Можно добавить overlay, на который повесить обработчик события.
Добавляем overlay:
<div class="overlay">
<div class="menu">
//code...
</div>
</div>
И добавляем скрипт на закрытие:
function addMenu () {
menu.style.display = 'block'
overlay.style.display = 'block'
overlay.addEventListener('click', closeMenu)
}
function closeMenu(e) {
if (e.target.classList.contains('overlay')) {
menu.style.display = 'none'
overlay.style.display = 'none'
overlay.removeEventListener('click')
}
}
То есть, мы вешаем слушатель клика по overlay и проверяем кликнули ли по самому overlay или по попапу. Если по overlay, то закрываем overlay и попап.
Ну и, конечно, лучше оперировать классами в этом случае, а не стилями. Классами проще, и проще анимировать все это дело.