Close dropdown menu after click outside of navbar using only JavaScript?
Close dropdown menu after click outside of navbar using only JavaScript?
I want to make a drop-down menu which one is very simple and when after click outside of nav its automatically hide. note I already make drop-down menu but... I don't understand how to close it. here is my HTML and javascript code.
<section class="dropdownone">
</section>
write an event that checks if the select dropdown is out of focus, ie, it is blurred, you need to write a blur event, when that event is fired, hide the dropdown menu.
– Code_Ninja
Jul 3 at 8:14
2 Answers
2
Using JavaScript :
Close dropdown menu after click outside of navbar using JavaScript and Menu filter :<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
Dropdown
</div>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i
</body>
</html>
the question is about clicking outside an dropdown, not about an hover state
– Lars-Olof Kreim
Jul 3 at 8:15
I modified the code, now it is about clicking I hope my answer will help you
– Husam Ebish
Jul 3 at 8:22
can you tell me how can i do it by using foreach or map or filter ?
– Noyon Ahmed
Jul 3 at 9:30
yes of course, i will post the new answer
– Husam Ebish
Jul 3 at 9:42
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
Dropdown
</div>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</body>
</html>
@Noyon Ahmed, is that what you want?
– Husam Ebish
Jul 3 at 9:49
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Possible duplicate of How do I detect a click outside an element?
– Lars-Olof Kreim
Jul 3 at 7:58