<input id="menu-toggle" type="checkbox">
<label id="menu-label" for="menu-toggle">
  <img id="menu-icon" src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30" width="30" />
</label>
<ul id="collapse-menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
#menu-toggle {
  display: none;
}

#collapse-menu {
  transition: transform 0.3s;
  transform-origin: top;
}

input:not(:checked) ~ #collapse-menu {
  transform: scaleY(0);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.