Как создать гамбургер меню, используя CSS и HTML?

Owebs

21 марта 2022

173

Время чтения: 5 минут

Оглавление

Развернуть Свернуть

Практически у каждого сайта имеется меню. Это меню, на планшетных и мобильных разрешениях, должно становиться адаптивным. Соответственно, нужна кнопка, открывающая и закрывающая это меню.
Когда произносится фраза "Кнопка меню" - все мы представляем эти три горизонтальные палочки, расположенные друг над другом, более известные как "меню-бургер" или "кнопка-бургер". И сегодня мы научимся делать бургер-меню.
В примерах к уроку используется шрифт Helvetica.

Для создания данной кнопки вам надо перекопировать следующие части кодов:

HTML:

                <div class="burger burgerSlider">
                    <div class="burgerBox">
                        <div class="burgerInner"></div>
                    </div>
                </div>

CSS:

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

JS:

                document.querySelectorAll('.burger').forEach(burger => {
                    burger.addEventListener('click', function () {
                        burger.classList.toggle('active');
                    });
                })

После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка: (Кликните по ней)