dropdown pure js code example

Example: 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);
})();