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.
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";
}
});
}.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;
}
}<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>The current code is also deployed at https://testbed.frameworksvideography.com. You need to shrink the width of your window to see the button.
1
Uh, I see you are great growing developer. But while seeing youtube video you have mis placed an var and used ‘panel’ instead of mmNavLinks. In Your Javascript code if you look correctly then you will find out an ‘panel.scrollHeight + “px”;’ I dont know what you really wanted to mean here but You didnt defined any variable named panel so the corrected code should be
mmNavLinks.scrollHeight + “px”;
I also know why this little mistakes are, and these are really disturbing but keep going on 🙂
So the MAIN PROBLEM WAS: You used an undefined variable…
The full Corrected js code will be,
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 = mmNavLinks.scrollHeight + "px"; // Change panel to mmNavLinks
}
});
}You can want any other helps if you want. I may help you free of cost for Eid :3