Question posted in 
I have a very simple website where I have a picture of my wife and I for the last 19 years that we’ve been together. A picture per month. It loads using lazy load which works great. I added anchor links (is that what they’re called?) so you can skip from year to year from the header. But imagine now I have 19 links up there. Friend of mine told me I should look into dropdown menu. I was able to find an example online and it works. But now it gives me 19 links vertically instead of horizontally. So I thought I would break it down into multiple subcategories.
2020-2024, 2010-2019 and 2005-2009. I got it "working" individually, but as soon as I enable all three, only the last one shows. What am I missing here? Please note I have very little css/js/html experience. I can follow directions well but I don’t know what’s natively in the language that should be obvious to someone with more experience.
Here is the relevant portions of the page. As I said above, I can get each of the three subcategories to work, but not all three at once.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function doDropdown() {
/*document.getElementById("myDropdown").classList.toggle("show");*/
document.getElementById("dropDown2020").classList.toggle("show");
document.getElementById("dropDown2010").classList.toggle("show");
document.getElementById("dropDown2000").classList.toggle("show");
}
function showDecade2020() {
document.getElementById("myDropdown2020").classList.toggle("show");
}
function showDecade2010() {
document.getElementById("myDropdown2010").classList.toggle("show");
}
function showDecade2000() {
document.getElementById("myDropdown2000").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');
}
}
}
}/* Dropdown Button */
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 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;
}<div class="dropdown">
<button onclick="doDropdown()" class="dropbtn">Jump to a specific year...</button>
<div id="dropDown2020" class="dropdown-content">
<button onclick="showDecade2020()" class="dropbtn">2020-2024</button>
<div id="myDropdown2020" class="dropdown-content">
<a href="#2024">2024</a>
<a href="#2023">2023</a>
<a href="#2022">2022</a>
<a href="#2021">2021</a>
<a href="#2020">2020</a>
</div>
</div>
<div id="dropDown2010" class="dropdown-content">
<button onclick="showDecade2010()" class="dropbtn">2010-2019</button>
<div id="myDropdown2010" class="dropdown-content">
<a href="#2019">2019</a>
<a href="#2018">2018</a>
<a href="#2017">2017</a>
<a href="#2016">2016</a>
<a href="#2015">2015</a>
<a href="#2014">2014</a>
<a href="#2013">2013</a>
<a href="#2012">2012</a>
<a href="#2011">2011</a>
<a href="#2010">2010</a>
</div>
</div>
<div id="dropDown2000" class="dropdown-content">
<button onclick="showDecade2000()" class="dropbtn">2005-2009</button>
<div id="myDropdown2000" class="dropdown-content">
<a href="#2009">2009</a>
<a href="#2008">2008</a>
<a href="#2007">2007</a>
<a href="#2006">2006</a>
<a href="#2005">2005</a>
</div>
</div>
</div>
2
Answers
Did you inspect the elements using DevTools? They are below each other since they are all positioned
absolute.To make the button fill all the space you can add more tweaks: