I’m trying to make a navigation menu using an accordian style dropdown. I’ve been following some guides online, but I just can’t seem to get the JavaScript right. I’ve managed to get the button to change color when clicked, but I can’t get the menu to expand.
Here’s the code I have currently.
HTML:
<nav>
<div id="header">
<button class="mobileMenu">☰</button>
<div class="logo">
<img src="files/logos/long_white_text.png" alt="Frameworks Videography Logo">
</div>
</div>
<ul class="nav-links">
**Truncated for simplicity
</ul>
<ul class="mmNavLinks">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<hr size="5">
<li><span class="underline">For Clients</span>
<ul class="sublist">
<li><a href="forms.html">Forms</a></li>
<li><a href="https://portal.frameworksvideography.com">Payment Portal</a></li>
<li><a href="https://support.frameworksvideography.com/myportal">Support Portal</a></li>
</ul>
</li>
<li><span class="underline">For Viewers</span>
<ul class="sublist">
<li><a href="https://live.frameworks.video/">Livestreams (TicketLeap)</a></li>
<li><a href="https://youtube.frameworks.video/">YouTube</a></li>
<li><a href="https://support.frameworksvideography.com/myportal">Support Portal</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
.mobileMenu {
font-size: 30px;
display: none;
border: none;
border-radius: 5px; /* Add border radius to buttons */
padding: 0px 5px 3px;
background-color: #bd2a2e;
transition: 0.3s;
color: white;
cursor: pointer;
outline: none;
}
@media (min-width: 1191px) {
.mmNavLinks{
display: none;
}
}
@media (max-width: 1190px) {
.mobileMenu {
display: block;
}
.mmNavLinks {
font-weight: bold;
font-size: 20px;
margin: 0 30%;
overflow: hidden;
max-height: 0;
}
.logo {
margin: 0 auto;
}
.nav-links {
display: none;
}
nav {
display:inline;
text-align: center;
}
nav ul {
display: block;
}
nav ul li {
margin: 30px 0px;
}
#header {
display: flex;
}
hr {
background-color: white;
}
.underline {
text-decoration: underline;
}
.sublist {
font-weight: normal;
font-size: 15px;
}
.active, .mobileMenu:hover{
background-color: white;
color: black;
}
}
JavaScript:
var acc = document.getElementsByClassName("mobileMenu");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var mmNavLinks = document.querySelector('.mmNavLinks');
if (mmNavLinks.style.maxHeight) {
mmNavLinks.style.maxHeight = null;
} else {
mmNavLinks.style.maxHeight = panel.scrollHeight + "px";
}
});
}
The current code is also deployed at https://testbed.frameworksvideography.com. You need to shrink the width of your window to see the button.
Thank you in advance for your assistance!