Цікавий спосіб реалізації кнопки-бургера на сайті

Нещодавно я обіцяв поділитися цікавим способом оформлення кнопки-бургера на сайті. Прийшов час це нарешті зробити

За основу візьму код із попередньої демонстрації, а саме зі статті Як із допомогою JavaScript змінити клас елемента. Трішки змінимо самий перший рядок, а саме

<a href="#" id="toogle">Menu</a>

змінимо на

<a id="menu-trigger" class="menu-trigger"><span></span></a>

Також змінимо даний об’єкт у 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);

А тепер, власне, фокус, який буде робитися виключно за допомогою CSS. Що ми зробимо? Додамо кілька додаткових елементів перед та після елемента menu-trigger, гарно їх оформимо та додамо краплинку анімації:

.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%);
}

Решту коду залишимо як є, і ось що у нас вийшло: