Нещодавно я обіцяв поділитися цікавим способом оформлення кнопки-бургера на сайті. Прийшов час це нарешті зробити
За основу візьму код із попередньої демонстрації, а саме зі статті Як із допомогою 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%); }
Решту коду залишимо як є, і ось що у нас вийшло:
Прокоментувати