dynamic navigation toggle button
// Dynamically size mobile drop down navigation bar
// HTML BELOW
const navToggle = document.querySelector(".nav-toggle");
const linksContainer = document.querySelector(".links-container");
const links = document.querySelector(".links");
navToggle.addEventListener("click", function () {
const containerHeight = linksContainer.getBoundingClientRect().height;
const linksHeight = links.getBoundingClientRect().height;
if (containerHeight === 0) {
linksContainer.style.height = `${linksHeight}px`;
}
else {
linksContainer.style.height = 0;
}
});
// HTML
<div class="links-container" style="height:0px;">
<ul class="links">
<li>
<a href="#home" class="scroll-link">home</a>
</li>
<li>
<a href="#about" class="scroll-link">about</a>
</li>
<li>
<a href="#services" class="scroll-link">services</a>
</li>
<li>
<a href="#tours" class="scroll-link">tours</a>
</li>
</ul>
</div>