Ubivectel,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#kide-menu {
width: 80px;
height: 24px;
background-color: #0000FF;
text-align: center;
}
#kide-menu:after {
content: "click me";
color: #FFFFFF;
}
.kide-menu {
display: none;
}
.kide-menu.show-menu {
display: block;
}
</style>
<script>
document.addEventListener('click', ({
target
}) => {
if (target.closest(".kide-menu")) return;
const kideMenu = document.querySelector('.kide-menu');
if (target.closest("#kide-menu")) kideMenu.classList.toggle("show-menu");
else kideMenu.classList.remove("show-menu");
})
</script>
</head>
<body>
<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
<div class="kide-menu">
меню
</div>
</body>
</html>