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

Демо

3,56 КБ
HTML, CSS, JS
Меню
анимация, гамбургер
Лицензия MIT

Код
Редактор

HTML

<div class="toggle triple">
    <span class="transition">Меню</span>
    <i class="triple item1 transition">Главная</i>
    <i class="triple item2 transition">О нас</i>
    <i class="triple item3 transition">Звонок</i>
</div>

CSS

.triple,
.triple span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    background-color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-top: 23px;
    text-transform: uppercase;
    cursor: pointer;
    font-style: normal;
    -webkit-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
.toggle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
    right: 20px;
    top: 20px;
}
.triple span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2;
    background-color: #ff6949;
    -webkit-box-shadow: 0 0 0 10px #ff6949;
    -moz-box-shadow: 0 0 0 10px #ff6949;
    box-shadow: 0 0 0 10px #ff6949;
}
.triple.toggle.active span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #111;
    -webkit-box-shadow: 0 0 0 0px #111;
    -moz-box-shadow: 0 0 0 0px #111;
    box-shadow: 0 0 0 0px #111;
}
.triple.toggle [class*="item1"] {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.triple.toggle [class*="item2"] {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.triple.toggle [class*="item3"] {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.triple.toggle.active .item1 {
    left: 100px;
    background-color: #6949aa;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.triple.toggle.active .item1:hover {
    -webkit-box-shadow: 0 0 0 6px #472788;
    -moz-box-shadow: 0 0 0 6px #472788;
    box-shadow: 0 0 0 6px #472788;
}
.triple.toggle.active .item2 {
    left: 70px;
    top: 70px;
    background-color: #49aa69;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.triple.toggle.active .item2:hover {
    -webkit-border-radius: 0 20px 0 20px;
    -moz-border-radius: 0 20px 0 20px;
    border-radius: 0 20px 0 20px;
}
.triple.toggle.active .item3 {
    top: 100px;
    background-color: #dd4969;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.triple.toggle.active .item3:hover {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

const toggler = document.querySelector(".toggle");
toggler.addEventListener("click", toggleMenu);

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

HTML
CSS
JS

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

Начиная с HTML, мы видим элемент div с классом «toggle triple», который служит контейнером для нашего меню. Внутри находится span для заголовка меню «Меню» и три элемента с метками «Главная», «О нас» и «Звонок». Эта структура довольно проста и заложит основу для того, что станет кликабельным, интерактивным меню.

CSS берет эту базовую структуру и наполняет ее стилем и анимацией. Примененные стили гарантируют, что наши пункты меню не просто статичны, но могут трансформироваться и перепозиционироваться на экране при взаимодействии. Правила CSS тщательно разработаны для обеспечения визуальной обратной связи через изменение цвета, теневые эффекты и даже вращение, делая меню не только функциональным, но и приятным для навигации. Определенные классы, такие как .triple, .triple span и .toggle, используются для стилизации элементов и определения анимаций, которые заставляют элементы меню расширяться, сжиматься и плавно смещаться при нажатии.

Магия анимации подробно описана в CSS, где указаны эффекты перехода и задержки для каждого элемента меню. Эти эффекты создают динамичный пользовательский опыт, позволяя меню изящно разворачиваться при нажатии на span «Меню». Использование цветов, теней и переходов позиционирования помогает отличать каждый элемент меню, делая навигацию интуитивно понятной и увлекательной.

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