Drop Down Menus

with CSS animation

by sperske

HTML

<nav>
  <ul class='root_menu'>
    <li>
      <a><u>F</u>ile</a>
      <ul class='sub_menu'>
        <li><a>New File <span>Ctrl+N</span></a></li>
        <li><a>Close All Tabs</a></li>
      </ul>
    </li>
    <li><a><u>E</u>dit</a></li>
  </ul>
</nav>
<div class='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

CSS

nav ul.root_menu {
  padding: 0;
  margin: 0;
}
nav ul.root_menu li {
  display: inline;
  list-style: none;
}
nav ul.root_menu li ul.sub_menu {
  display: block;
  list-style: none;
}

.box {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #aaa;
  margin: 10px;
}

.box.slide {
  animation: slide-down 550ms ease;
  animation-fill-mode: forwards;
}

@keyframes slide-down {
  0% {
    transform: translateX(0) rotate(-18deg);
  }

  75% {
    transform: translateX(100px) rotate(10deg);
  }

  100% {
    transform: translateX(100px) rotate(180deg);
  }
}

JavaScript

const boxes = document.getElementsByClassName('box');
[...boxes].forEach((b) => {
	b.addEventListener('click', (e) => {
		e.target.classList.toggle('slide')
	}, false);
});