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

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

За основу візьму код із попередньої демонстрації, а саме зі статті Як із допомогою 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%);
}

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