pure js dropdown
/* HTML */
<nav>
<ul class="drop-down closed">
<li><a href="#" class="nav-button">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
/* Page styles
================================ */
html, body { background: #1abc9c; }
nav {margin-top: 40px; }
/* Drop Down Styles
================================ */
nav .drop-down {
list-style: none;
overflow: hidden; /* When ul height is reduced, ensure overflowing li are not shown */
height: 172px; /* 172px = (38 (li) + 5 (li border)) * 4 (number of li) */
background-color: #34495e;
font-family: Arial;
width: 200px;
margin: 0 auto;
padding: 0;
text-align: center;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
nav .drop-down.closed {
/* When toggled via jQuery this class will reduce the height of the ul which inconjuction
with overflow: hidden set on the ul will hide all list items apart from the first */
/* current li height 38px + 5px border */
height: 43px;
}
nav .drop-down li {
border-bottom: 5px solid #2c3e50;
}
nav .drop-down li a {
display: block;
color: #ecf0f1;
text-decoration: none;
padding: 10px; /* Larger touch target area */
}
nav .drop-down li:first-child a:after {
content: "\25BC";
float: right;
margin-left: -30px; /* Excessive -margin to bring link text back to center */
margin-right: 5px;
}
/* JS */
(function() {
// Bind Click event to the drop down navigation button
document.querySelector('.nav-button').addEventListener('click', function() {
/* Toggle the CSS closed class which reduces the height of the UL thus
hiding all LI apart from the first */
this.parentNode.parentNode.classList.toggle('closed')
}, false);
})();