I have a navbar that has multiple buttons that on click display a dropdown menu.What happens is when I click a button it shows dropdown menu, then when I click outside the menu it hides the active menu which is right.
enter image description here
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"><style>
<style>
.ul {
}
header {
position: fixed;
right: 0;
top: 0;
left: 0;
z-index: 100;
height: 60px;
box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
background: #4891c4;;
color: #ffffff;
transition: left 300ms;
}
.header-content {
position: relative;
top: 0;
width: 200px;
height: 60px;
float: right;
align-items: center;
justify-content: center;
}
.header-content, .header-menu {
display: flex;
align-items: center;
}
.header-content {
justify-content: space-between;
padding: 0rem 1rem;
}
.header-content label:first-child span {
font-size: 1.3rem;
}
.header-content label {
cursor: pointer;
}
.arrow_box {
top: 10px;
position: relative;
border: 1px solid #aaa; /*set border colour here*/
width: 300px;
height: auto;
background-color: #d6eef9; /*set menu container background color here*/
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour and size here*/
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #d6eef9;
border-width: 10px;
right: 8px;
margin-right: 0px;
}
.dropdown {
display: flex;
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
overflow: none;
z-index: 1;
right: 0;
margin-right: 0rem;
top: calc(100% + 0rem);
}
.header-dropdown {
background-color: #d6eef9;
}
.header-dropdown ul li:hover {
background: #d8e2ec;
}
.header-dropdown ul {
list-style-type: none;
padding: 0;
text-align: center;
}
.header-dropdown a {
text-decoration: none;
color: var(--menu-color);
display: block;
padding: 0.5rem 0rem 0.5rem 1rem; /* control menu height here */
text-align: left; /* control menu text align here center, left or right */
}
.header-dropdown a span {
min-height: 15px;
display: inline-flex;
align-items: center;
font-size: 1.7rem;
margin: 0rem 0.5rem 0rem 0.5rem !important;
}
.header-dropdown a span, .header-dropdown a small {
color: #327091;
}
.header-dropdown a small {
font-size: 0.95rem; /* Sidebar font size */
font-weight: normal;
margin: 0rem 1rem 0rem 1rem !important;
font-family: 'Open Sans', sans-serif;
}
.dropbtn {
border: none;
cursor: pointer;
}
.show {
display: block;
}
.notification {
display: flex;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
cursor: pointer;
color: white;
padding: 1px;
font-size: 1.8rem;
justify-content: center;
align-items: center;
}
.badge {
display: flex;
position: absolute;
background: red;
height: 7px;
width: 7px;
justify-content: center;
align-items: center;
border-radius: 50%;
right: -7px;
top: -7px;
padding: 8px;
color: #fff;
font-size: .8rem;
font-weight: 500;
}
</style>
</head>
<body>
<header>
<div class="header-content">
<div class="dropdown">
<a>
<div onclick="myFunction(1)" href="#" class="notification dropbtn las la-envelope"></div>
<span onclick="myFunction(1)" class="badge dropbtn">4</span>
</a>
<div id="myDropdown1" class="dropdown-content">
<div class="arrow_box">
<div class="header-dropdown">
<ul>
<li><a href=""><small>Message content</small></a></li>
<li><a href=""><small>Message content</small></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a>
<div onclick="myFunction(2)" href="#" class="notification dropbtn las la-bell"></div>
<span onclick="myFunction(2)" class="badge dropbtn">8</span>
</a>
<div id="myDropdown2" class="dropdown-content">
<div class="arrow_box">
<div class="header-dropdown">
<ul>
<li><a href=""><span class="las la-question"><small>FAQ</small></span></a></li>
<li><a href=""><span class="las la-user"><small>Profile</small></span></a></li>
<li><a href=""><span class="las la-cog"><small>Settings</small></span></a></li>
<li><a href=""><span class="las la-sign-out-alt"><small>Log out</small></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction(num) {
document.getElementById("myDropdown" + num).classList.toggle("show");
}
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');
}
}
}
}
</script>
</div>
</header>
</body>
</html>
The problem is: when I click a button it shows dropdown menu, then when I click another button last menu is still shwoing and not disappearing, that means it will show two menu contents at the same time.
i need to hide last menu content and show active last menu content.
Please help!
Hope hearing good solution from you