I'm building a new website with a navbar with a dropdown menu and want to have the dropdown disappear when I click on another button or other part of the site. How do I code that?
The code below is my latest experiment in trying to get this to work. It worked fine when it was one button, but I've been unable to scale it to multiple buttons. I'm very new to this and trying to learn.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.wrapper {
min-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="navbar">
<a target='_blank' href="#home">Company name</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(1)">Our Methods
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown1">
<a target='_blank' href="#link">Insurance</a>
<a target='_blank' href="#link">Divorce</a>
<a target='_blank' href="#link">Financial Planning</a>
<a target='_blank' href="#link">Mortgage</a>
<a target='_blank' href="#link">Stocks</a>
<a target='_blank' href="#link">Pension</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(2)">Who we are
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown2">
<a target='_blank' href="#link">About the Team</a>
<a target='_blank' href="#link">Awards</a>
<a target='_blank' href="#link">Interesting articles</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(3)">Business info
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown3">
<a target='_blank' href="#link">Prices</a>
<a target='_blank' href="#link">Privacy</a>
<a target='_blank' href="#link">Methods</a>
</div>
</div>
<a target='_blank' href="#home">Recommendations</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(4)">Advice Evenings
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown4">
<a target='_blank' href="#link">Succesful Pensions</a>
<a target='_blank' href="#link">Casestudie Pension</a>
<a target='_blank' href="#link">Business Contacts</a>
</div>
</div>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(num) {
document.getElementById("myDropdown" + num).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown1 = document.getElementById("myDropdown1");
if (myDropdown1.classList.contains('show')) {
myDropdown1.classList.remove('show');
}
var myDropdown2 = document.getElementById("myDropdown2");
if (myDropdown2.classList.contains('show')) {
myDropdown2.classList.remove('show');
}
var myDropdown3 = document.getElementById("myDropdown3");
if (myDropdown3.classList.contains('show')) {
myDropdown3.classList.remove('show');
}
var myDropdown4 = document.getElementById("myDropdown4");
if (myDropdown4.classList.contains('show')) {
myDropdown4.classList.remove('show');
}
}
}
</script>
</body>
</html>
I expected all buttons to be hidden when I click elsewhere, but somehow that isn't happening. (you can see the code in action here: http://growtricks.com/dropdown/dropdown4.html ).
I've tried including this line at the beginning of MyFunction:
document.getElementsByClassName('dropdown-content').forEach(function(dropdown) { dropdown.classList.remove('show'); });
But that just completely stops ever showing the dropdown-content.
There are multiple ways. I kind a like to have separate function variable for clearing previous action:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.wrapper {
min-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="navbar">
<a target='_blank' href="#home" onclick="myFunction('home')">Company name</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(1)">Our Methods
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown1">
<a target='_blank' href="#link">Insurance</a>
<a target='_blank' href="#link">Divorce</a>
<a target='_blank' href="#link">Financial Planning</a>
<a target='_blank' href="#link">Mortgage</a>
<a target='_blank' href="#link">Stocks</a>
<a target='_blank' href="#link">Pension</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(2)">Who we are
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown2">
<a target='_blank' href="#link">About the Team</a>
<a target='_blank' href="#link">Awards</a>
<a target='_blank' href="#link">Interesting articles</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(3)">Business info
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown3">
<a target='_blank' href="#link">Prices</a>
<a target='_blank' href="#link">Privacy</a>
<a target='_blank' href="#link">Methods</a>
</div>
</div>
<a target='_blank' href="#home" onclick="myFunction('home')">Recommendations</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(4)">Advice Evenings
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown4">
<a target='_blank' href="#link">Succesful Pensions</a>
<a target='_blank' href="#link">Casestudie Pension</a>
<a target='_blank' href="#link">Business Contacts</a>
</div>
</div>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
let closeDropdown = function() {
}
function myFunction(num) {
closeDropdown();
let el = document.getElementById("myDropdown" + num);
if (el) {
el.classList.toggle("show");
closeDropdown = function() {
el.classList.remove("show");
}
} else {
closeDropdown = function() {
}
}
}
</script>
</body>
</html>
The one thing the other answer did not address was how to also hide the dropdowns if one clicks elsewhere on the page. I found that adding the code below solved that issue:
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
I've made a modal with the help of javascript. How come the modal doesn't come out? These are my codes: <button class="jobview-control btn-primary jobview-btn" id="btn-show-modal">Recommend&...
I've made a modal with the help of javascript. How come the modal doesn't come out? These are my codes: <button class="jobview-control btn-primary jobview-btn" id="btn-show-modal">Recommend&...
arr = Array(10).fill(false) arr[-2] = true console.log(arr) [false, false, false, false, false, false, false, false, false, false, -2: true] console.log(arr.length) // 10 I'm so surprised that ...
arr = Array(10).fill(false) arr[-2] = true console.log(arr) [false, false, false, false, false, false, false, false, false, false, -2: true] console.log(arr.length) // 10 I'm so surprised that ...
I have an ext:button. I want to trigger it's OnClick event by JavaScript based on the condition of a confirm message. My Button <ext:Button ID="btnAddEsya" Text="text" runat="server" Icon="Add" &...
I have an ext:button. I want to trigger it's OnClick event by JavaScript based on the condition of a confirm message. My Button <ext:Button ID="btnAddEsya" Text="text" runat="server" Icon="Add" &...
I would like to use the page scroll effect so that only the content of the #right element is scrolled in the layout. A similar effect can be seen on Facebook when scrolling posts (posts are scrolled ...
I would like to use the page scroll effect so that only the content of the #right element is scrolled in the layout. A similar effect can be seen on Facebook when scrolling posts (posts are scrolled ...