CSS Меню №11 - пример кода

Демо

3,51 КБ
HTML, CSS, JS
Меню
анимация, гамбургер, скользящее
Лицензия MIT

Код
Редактор

HTML

<nav id="burger-menu">
    <div class="burger">
        <div class="burger-line burger-line-1"></div>
        <div class="burger-line burger-line-2"></div>
        <div class="burger-line burger-line-3"></div>
    </div>
    <div class="moduletable_menu">
        <ul class="nav menu">
            <li><a href="#">Главная</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
</nav>

CSS

#burger-menu a {
    color: #fff;
    text-decoration: none;
}
#burger-menu li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
}
#burger-menu {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
    z-index: 2;
    position: fixed;
    left: -400px;
    width: 400px;
    top: 0;
    bottom: 0;
    margin: 0;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#burger-menu.active {
    background-color: rgba(0, 0, 0, 0.75);
    left: 0;
}
#burger-menu .menu {
    margin-top: 40px;
}
.burger {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 35px;
    width: 30px;
    padding: 0 5px;
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    z-index: 3;
}
.burger-line {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
}
.burger-line-1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 30px;
    top: 5px;
}
.burger-line-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 15px;
    width: 30px;
    left: 5px;
}
.burger-line-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 30px;
    top: 25px;
}
.active .burger-line-1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 15px;
    top: 11px;
}
.active .burger-line-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 15px;
    width: 0px;
    left: 9px;
}
.active .burger-line-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 15px;
    top: 20px;
}

const burgerMenu = document.querySelector("#burger-menu");
const burger = document.querySelector(".burger");
burger.addEventListener("click", toggleBurger);

function toggleBurger() {
    this.classList.toggle("active");
    burgerMenu.classList.toggle("active");
}

HTML
CSS
JS

Фрагмент кода, который мы рассматриваем, создан для оживления меню-бургера на веб-странице. Давайте разберем его на понятные части. Этот код словно магический трюк, превращающий статичную страницу в интерактивное и веселое место.

Сначала HTML залогирует основу. Представьте, что вы устраиваете сцену для пьесы. Здесь сцена — это панель навигации <nav>, в которой расположен знаковый иконка-бургер из трех линий .burger-line. Как реквизит на сцене, эти линии уютно расположены внутри <div>, который представляет собой иконку бургера. Другой <div> действует как скрытый люк, открывающий меню, когда происходит магия (или, в данном случае, анимация).

Переходя к CSS, здесь наш костюм и дизайн сцены приходят в игру. CSS стилизует панель навигации и иконку-бургер, придавая им определенный вид. Например, когда меню не активно, это как если бы наш актер ожидал в кулисах, расположенный вне экрана с left: -400px;. Но как только меню становится активным, магия CSS-переходов выносит его на передний план, плавно скользя в поле зрения с анимацией, напоминающей подъем занавеса на шоу.

Настоящая магия происходит с JavaScript. Это режиссер нашей пьесы, который решает, когда происходит действие. Скрипт ожидает клика по иконке-бургеру. Как только это происходит, он переключает сценарий, добавляя или убирая активный класс как у меню, так и у самой иконки. Это запускает наши CSS-анимации, превращая иконку-бургер в кнопку закрытия и выдвигая меню на виду. Это как кульминационный момент в магическом трюке, когда кролик вытаскивается из шляпы, или, в нашем случае, меню скользит на виду, создавая бесшовное взаимодействие, которое кажется одновременно магическим и интуитивно понятным.

Вот и все. То, что может показаться простой кнопкой меню, на самом деле является хорошо скоординированным представлением, объединяющим HTML, CSS и JavaScript для создания захватывающего пользовательского опыта. Это меню-бургер не просто о навигации; это о добавлении анимации и жизни на цифровую сцену.