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

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

Owebs
21 марта 2022
Просмотры 347
Рейтинг
Время чтения Время чтения: 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');
                    });
                })
            

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

 
Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 218
Рейтинг 15
8 декабря
6 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 463
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 433
Рейтинг 4
9 февраля
4 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен