# Make menu disappear when you click outside!
**URL:** https://forum.kirupa.com/t/make-menu-disappear-when-you-click-outside/650800
**Category:** web dev
**Created:** [February 13, 2022, 7:48am UTC](https://forum.kirupa.com/t/make-menu-disappear-when-you-click-outside/650800 "2022-02-13T07:48:30Z")
**Posts on this page:** 2
**Page:** 1
I made this tutorial of menu but made the menu smaller and I have been trying to make it disappear when I click outside it not when I click on it and it never work. how I can do that? help, please.
menu tutorial:
[ ](https://www.youtube.com/watch?v=D7N0uWItUOE)
```auto
Complaint
ID
Date
Category
Status
connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$qury = mysqli_query($conn,"select complaintId ,date,category,status,description,roomNum from complaint");
$romNumerquery = mysqli_query($conn,"select roomNumber from classroom");
//$result = $conn->query($sql);
if ($qury-> num_rows >0){
while ($row = $qury-> fetch_assoc()) {
echo "
Hi @rhfproject221 - that is a great question! One way you can solve this is by taking advantage of how events travel and “hiding” the click event selectively. Here is the modified code that accomplishes what you are trying to do:
```auto
var roundButton = document.querySelector("#roundButton")
var flyoutMenu = document.querySelector("#flyoutMenu")
document.body.addEventListener("click", clickedHere, false);
flyoutMenu.addEventListener("click", menuClicked, true);
var menuOpen = false;
roundButton.addEventListener("click", showMenu, false);
flyoutMenu.addEventListener("click", hidMenu, false);
function showMenu(e){
flyoutMenu.classList.add("show");
document.body.style.overflow="hidden";
menuOpen = true;
e.stopPropagation();
}
function hidMenu(e){
flyoutMenu.classList.remove("show");
document.body.style.overflow="auto";
menuOpen = false;
}
function menuClicked(e) {
console.log("Menu clicked");
e.stopPropagation();
}
function clickedHere(e) {
if (menuOpen) {
hidMenu();
}
console.log("Body clicked");
}
```
There are a few things to call out. First, here is the behavior that we want:
1. When I click anywhere inside my menu, the menu shouldn’t disappear
2. When I click anywhere outside of my menu, the menu should disappear (if it is open)
From this point, for #2 we need to listen for an event click outside of the menu. The body element is a good place for that. For #1, we want to detect a click inside the menu. Note that the event listener registration has the bubbling property set to **true**. This ensures that clicking on the menu will cause the menu element to overhear the click first BEFORE sending it over to the `body` element.
To avoid the `body` element from overhearing the click, the **stopPropagation** call solves that.
There are a few more details there, but what I summarized are the big ones. Does this help?
Cheers,
Kirupa