I'm trying to build a dropdown menu, but its div (which is position static) keeps going up as I add new items to the menu.
It's the align-items:center rule that keeps repositioning the item so it's properly vertically aligned.
If I discard this rule, it'll break the navbar, the other items won't be centered as I intended.
If I use the display property, as the code bellow shows, the button starts where I want but whenever I click on it, it goes out of its place.
const dropdown = () => {
let display = document.getElementById("menu").style.display;
document.getElementById("menu").style.display = (display === "none") ? "block":"none";
//toggling "visibility" takes the div out of its place
}.nav {
display: flex;
justify-content: center;
align-items: center;
height:160px;
border:1px solid black;
text-align: center;
}
.dropdownContainer {
margin-left: auto;
}
#drop {
display:none;
/* visibility:hidden;*/
}<nav class="nav">
<div>Irrelevant elements to this question</div>
<div class="dropdownContainer">
<button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button>
<div id="menu">
<!-- the more items added here, the more up the page the whole container goes -->
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
</div>
</nav>If I change the JS code so it toggles the visibility property instead, the button already starts out of its intended position but it also doesn't change place when its clicked on.
How can I keep the button centered as it is and make the menu drop down without changing the button's place?
I Think that's what you want to achieve:
I positioned your menu underneath the button with position absolute. so the button won't change its position.
const dropdown = () => {
let display = document.getElementById("menu").style.display;
document.getElementById("menu").style.display = (display === "none") ? "block":"none";
//toggling "visibility" takes the div out of its place
}.nav {
display: flex;
justify-content: center;
align-items: center;
height: 160px;
border: 1px solid black;
text-align: center;
}
.dropdownContainer {
margin-left: auto;
position: relative;
}
#drop {
display: none;
/* visibility:hidden;*/
}
#menu {
position: absolute;
top: 100%;
}<nav class="nav">
<div>Irrelevant elements to this question</div>
<div class="dropdownContainer">
<button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button>
<div id="menu">
<!-- the more items added here, the more up the page the whole container goes -->
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
</div>
</nav>const dropdown = () => {
let display = document.getElementById("menu").style.display;
document.getElementById("menu").style.display = (display === "none") ? "block":"none";
//toggling "visibility" takes the div out of its place
}.nav {
display: flex;
justify-content: center;
align-items: center;
height:160px;
border:1px solid black;
text-align: center;
}
.dropdownContainer {
margin-left: auto;
}
#drop {
display:none;
/* visibility:hidden;*/
}
#menu{
display: block;
position: absolute;
height: 60px;
overflow-y: auto;
width: 80px;
}<nav class="nav">
<div>Irrelevant elements to this question</div>
<div class="dropdownContainer">
<button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button>
<div id="menu">
<!-- the more items added here, the more up the page the whole container goes -->
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
</div>
</nav>