Практически у каждого сайта имеется меню. Это меню, на планшетных и мобильных разрешениях, должно становиться адаптивным. Соответственно, нужна кнопка, открывающая и закрывающая это меню.
Когда произносится фраза "Кнопка меню" - все мы представляем эти три горизонтальные палочки, расположенные друг над другом, более известные как "меню-бургер" или "кнопка-бургер".
И сегодня мы научимся делать бургер-меню.
В примерах к уроку используется шрифт Helvetica.
Для создания данной кнопки вам надо перекопировать следующие части кодов:
<div class="burger burgerSlider"> <div class="burgerBox"> <div class="burgerInner"></div> </div> </div>
.burger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .burger:hover { opacity: 0.7; } .burger.active:hover { opacity: 0.7; } .burger.active .burgerInner, .burger.active .burgerInner::before, .burger.active .burgerInner::after { background-color: #000; } .burgerBox { width: 40px; height: 24px; display: inline-block; position: relative; } .burgerInner { display: block; top: 50%; margin-top: -2px; } .burgerInner, .burgerInner::before, .burgerInner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .burgerInner::before, .burgerInner::after { content: ""; display: block; } .burgerInner::before { top: -10px; } .burgerInner::after { bottom: -10px; } .burgerSlider .burgerInner { top: 2px; } .burgerSlider .burgerInner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .burgerSlider .burgerInner::after { top: 20px; } .burgerSlider.active .burgerInner { transform: translate3d(0, 10px, 0) rotate(45deg); } .burgerSlider.active .burgerInner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .burgerSlider.active .burgerInner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); }
document.querySelectorAll('.burger').forEach(burger => { burger.addEventListener('click', function () { burger.classList.toggle('active'); }); })
После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка: (Кликните по ней)