Burger Button

by Андрій Іванюра

HTML

<a id="menu-trigger" class="menu-trigger"><span></span></a>
<ul id="top-menu">
  <li class="link">
    <a href="#">Link 1</a>
  </li>
  <li class="link">
    <a href="#">Link 2</a>
  </li>
  <li class="link">
    <a href="#">Link 3</a>
  </li>
</ul>

CSS

.menu-trigger {
	position: relative;
	display: block;
	cursor: pointer;
  margin-top: 20px;
  margin-left: 20px;
  width: 25px;
  height: 25px;
}
.menu-trigger span {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 8%;
	background-color: #222;
	font-size: 0px;
	transition: background-color 0.3s;
}

.menu-trigger span:before,
.menu-trigger span:after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: #222;
	content: '';
	transition: transform 0.3s, background-color 0.3s;
}

.menu-trigger span:before {
	transform: translateY(-250%);
}

.menu-trigger span:after {
	transform: translateY(250%);
}

.menu-trigger-checked span:before {
	transform: translateY(-350%);
}

.menu-trigger-checked span:after {
	transform: translateY(350%);
}
#top-menu {
  position: fixed;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 0;
  transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
}

.menu-opened {
  height: 100% !important;
}

.link {
  width: 38.2vw;
  max-width: 440px;
  height: 20vw;
  max-height: 231px;
  margin: 0.5vw;
  text-align: center;
  display: table;
}

.link a {
  color: #fff;
  background: #333;
  display: block;
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

JavaScript

function menuOpen() {
  if (document.getElementById("top-menu").classList.contains('menu-opened')) {
    document.getElementById("top-menu").classList.remove('menu-opened');
    document.getElementById("menu-trigger").classList.remove('menu-trigger-checked');
  } else {
    document.getElementById("top-menu").classList.add('menu-opened');
    document.getElementById("menu-trigger").classList.add('menu-trigger-checked');
  }
}

function siteLoaded() {
  document.getElementById("menu-trigger").addEventListener('click', menuOpen);
}
document.addEventListener("DOMContentLoaded", siteLoaded);