I created a Dropdown menu onclick with Javascript. The dropdown menu is worked but there I face a problem. I also added a shadow in my Dropdown Menu. The shadow is not shown when I give another div element after the Dropdown Menu. See the image below -
If I add "position:relative" in my CSS code ".navbar" class, it works. But that time the Dropdown Menu is not shown.
<!DOCTYPE HTML>
<html>
<head>
<style>
*
{
box-sizing: border-box;
margin: 0;
}
body
{
padding: 0;
}
.navbar
{
width: 100%;
padding: 0 10% 0 10%;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
z-index: 4;
position: relative;
}
.navbar a
{
padding:15px 0px;
text-align: center;
text-decoration: none;
float: left;
font-weight: 200;
}
.dropbtn
{
font-size: 16px;
border: none;
outline: none;
padding: 21.5px 20px;
background-color: inherit;
margin: 0;
cursor: pointer;
font-weight: bolder;
color: #2d3436;
}
.dropbtn:hover,.dropbtn:focus i
{
color: #01ad6e;
}
.dropdown
{
float: left;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #fff;
min-width: 460px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
height: 450px;
border-radius: 3.5px;
z-index: 1;
border-top: 2px solid #000;
}
.show{display:block}
.container
{
width: 100%;
padding: 2% 20% 2% 20%;
background-color: #dfe4ea;
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button onclick="my2Function()" class="dropbtn dropbtn1">Marketing</button>
<div id="myDropdown1" class="dropdown-content dropdown-content1">
</div>
</div>
<div class="dropdown">
<button onclick="my2Function()" class="dropbtn dropbtn2">Development</button>
<div id="myDropdown2" class="dropdown-content dropdown-content2">
</div>
</div>
<div class="dropdown">
<button onclick="my3Function()" class="dropbtn dropbtn3">Others</button>
<div id="myDropdown3" class="dropdown-content dropdown-content2">
</div>
</div>
</div>
<div class="container">
<h1>Marketing</h1>
</div>
<script>
function my1Function() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function my2Function() {
document.getElementById("myDropdown2").classList.toggle("show");
}
function my3Function() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.addEventListener('click', function(event) {
const dropdownContents = document.querySelectorAll('.dropdown-content')
dropdownContents.forEach(content => {
content.classList.remove('show');
});
if (event.target.matches('.dropbtn')) {
event.target.nextElementSibling.classList.add('show');
}
})
</script>
</body>
CodePudding user response：
Change the navbar CSS to
.navbar {
width: 100%;
padding: 0 10% 0 10%;
height: 60px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
z-index: 4;
position: relative;
}
We need to remove the overflow: hidden and add height to navbar. Overflow hidden will hide the dropdown.
CodePudding user response：
There was multiple error/mistake. I have change the code and looks it's working.
Changes are:
.navbar{overflow: hidden;}Remove the property from.navbar.First onclick event should call
my1Function()but you didmy2Function()Comment the last addEventListener is script.
<!DOCTYPE HTML>
<html>
<head>
<style>
*
{
box-sizing: border-box;
margin: 0;
}
body
{
padding: 0;
}
.navbar
{
width: 100%;
padding: 0 10% 0 10%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
z-index: 4;
position: relative;
}
.navbar a
{
padding:15px 0px;
text-align: center;
text-decoration: none;
float: left;
font-weight: 200;
}
.dropbtn
{
font-size: 16px;
border: none;
outline: none;
padding: 21.5px 20px;
background-color: inherit;
margin: 0;
cursor: pointer;
font-weight: bolder;
color: #2d3436;
}
.dropbtn:hover,.dropbtn:focus i
{
color: #01ad6e;
}
.dropdown
{
float: left;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #fff;
min-width: 460px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
height: 450px;
border-radius: 3.5px;
z-index: 1;
border-top: 2px solid #000;
}
.show{display:block}
.container
{
width: 100%;
padding: 2% 20% 2% 20%;
background-color: #dfe4ea;
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button onclick="my1Function()" class="dropbtn dropbtn1">Marketing</button>
<div id="myDropdown1" class="dropdown-content dropdown-content1">
</div>
</div>
<div class="dropdown">
<button onclick="my2Function()" class="dropbtn dropbtn2">Development</button>
<div id="myDropdown2" class="dropdown-content dropdown-content2">
</div>
</div>
<div class="dropdown">
<button onclick="my3Function()" class="dropbtn dropbtn3">Others</button>
<div id="myDropdown3" class="dropdown-content dropdown-content2">
</div>
</div>
</div>
<div class="container">
<h1>Marketing</h1>
</div>
<script>
function my1Function() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function my2Function() {
document.getElementById("myDropdown2").classList.toggle("show");
}
function my3Function() {
document.getElementById("myDropdown3").classList.toggle("show");
}
/* window.addEventListener('click', function(event) {
const dropdownContents = document.querySelectorAll('.dropdown-content')
dropdownContents.forEach(content => {
content.classList.remove('show');
});
if (event.target.matches('.dropbtn')) {
event.target.nextElementSibling.classList.add('show');
}
}) */
</script>
</body>