I'm facing an issue with creating a dropdown menu that includes animation. When I tried to open the menu, it only displays 2 items instead of the expected 5.
HTML
<div id="header">
<div id="logo" class="logo">
<a id="aLogo" href="#"></a>
</div>
<div id="navigation">
<ul>
<li><a class="button" href="#"><span>About</span></a></li>
<li><a class="button" href="#"><span>Examples</span></a></li>
<li><a class="button" href="#"><span>Form</span></a></li>
<li><a class="button" href="#"><span>Contact</span></a></li>
</ul>
CSS at media within 768px
div#logo {
width: 10%;
float: none;
clear: both;
margin: 0 auto;
}
div#navigation {
display: block;
clear: both;
float: none;
margin: 0 auto;
width: 50%;
max-height: 0;
overflow: hidden;
transition: max-height .5s ease-out;
box-shadow: 0px 0px 5px;
}
JAVASCRIPT
function showobj() {//Slide down animation
if (naviDiv.style.maxHeight) {
naviDiv.style.maxHeight = null;
} else {
naviDiv.style.maxHeight = naviDiv.scrollHeight + "px";
}
}
function mediaQuery(x) { //Minimize navbar if screen under 768px
"use strict";
if (x.matches) {
ulNav.insertBefore(newLi, ulNav.childNodes[1]);//add Home button
aHome.style.display = "block";
for (var i = 0; i < logoDiv.length; i++) {
logoDiv[i].addEventListener('click', showobj);
}
} else {
for (var i = 0; i < logoDiv.length; i++) {
logoDiv[i].removeEventListener('click', showobj);
}
aHome.style.display = "none";//Hide home button
}
}
mediaQuery(x);
x.addListener(mediaQuery);
Access the jsfiddle link below for more details: https://jsfiddle.net/vwbo9exg/27/