I have been trying to make the drop down menu push content down rather than display over the other buttons.
I have looked at other solutions and I have tried but I get strange output. I believe it's because I have a system of inline grids for each drop down button.
I tried setting position to relative and absolute, but did not achieve the desired results. I experimented with similar code but with only one inline-grid with 1 column and 2 rows, and it works, but it does not work for me in the main website.
I also tried deleting the absolute position from the .dropdown-content class, but it doesn't respond like it should.
What am I doing wrong?
/* 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 menu 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 < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.html .body {
width: 100%;
height: 100%;
}
body {
background-color: blanchedalmond;
}
.griddy {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: 35px;
background-color: pink;
}
[class^='ssof'] {
display: grid;
outline: 1px solid black;
align-items: center;
justify-content: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav {
border: 2px solid;
background-color: darkcyan;
}
/* .topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
} */
/* .body {
background-image: "nico.png";
display: grid;
grid-template-rows: auto, 1fr, auto;
grid-template-columns: 100%;
} */
.banner {
display: flex;
grid-auto-columns: 80% 20%;
justify-content: center;
margin-right: auto;
}
.placeme {
margin-left: auto;
width: 20%;
border: 2;
height: 36px;
padding: 0 10px;
outline: 0;
}
.main {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
/*100%*/
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.maincontent {
display: grid;
/* outline: 3px solid black; */
grid-template-columns: 2fr 8fr;
gap: 10px;
background-color: lightgray;
outline: solid 8px lightgray;
/*20% 80%*/
/* grid-template-rows: auto auto auto auto; */
}
/* [class^='sidenavinline'] { */
.sidenavinline {
display: inline-grid;
grid-template-columns: 100%;
grid-template-rows: 60px 60px 60px;
/* outline: solid 3px black; */
grid-auto-rows: 60px;
gap: 10px;
}
/* .one {
display: grid;
outline: solid 2px blue;
} */
[class^='one'] {
display: grid;
align-items: center;
justify-content: center;
/* outline: 3px dashed #f90; */
background-color: white;
font-size: 20px;
color: #333;
gap: 10px;
}
.mainmain {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 150px;
/* outline: solid blueviolet; */
/* grid-auto-columns: 1fr; */
grid-auto-rows: 150px;
gap: 10px;
}
[class^='submain'] {
/* display: grid; */
/* outline: dashed 3px black; */
background-color: white;
/* grid-auto-rows: 32%; */
/* position: absolute; */
}
.footy {
border: 3px solid black;
padding: 30px;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="banner"><input type="text" placeholder="Search.." class="placeme"></div>
<div class="griddy">
<div class="ssof">home</div>
<div class="ssof">search</div>
<div class="ssof">bagicon</div>
<div class="ssof">account</div>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="main">
<div class="sidenav"> p </div>
<div class="maincontent">
<div class="sidenavinline">
<div class="one">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<div class="one">b</div>
<div class="one">c</div>
<div class="one">b</div>
<div class="one">e</div>
</div>
<div class="mainmain">
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items</div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
<div class="submain"> this is where we put items </div>
</div>
</div>
<footer>
<p class="footy">bottom content</p>
</footer>
</div>
</body>