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

Демо

16,34 КБ
HTML, CSS
Меню
анимация, горизонтальное
Лицензия MIT

Код
Редактор

HTML

<nav>
    <ul>
        <li>Главная</li>
        <li>О нас</li>
        <li>Контакты</li>
        <li>Вакансии</li>
    </ul>
</nav>

CSS

@import url("https://fonts.googleapis.com/css?family=Varela+Round");

body {
    font-family: monospace;
    text-transform: uppercase;
}
ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    font-size: 22px;
}

li {
    position: relative;
    list-style-type: none;
    margin-right: 50px;
    cursor: pointer;
    color: white;
}
li:last-child {
    margin-right: 0px;
}
li:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(0deg);
    -moz-transform: translateX(-50%) rotate(0deg);
    -o-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
}

li:nth-child(1):after {
    background: #ed4337;
}

li:nth-child(2):after {
    background: #a1d3a2;
}

li:nth-child(3):after {
    background: #50b8e7;
}

li:nth-child(4):after {
    background: #efe200;
}

li:nth-child(1):after {
    -webkit-clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
    clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
    height: 85px;
    width: 75px;
    bottom: -47px;
    -webkit-animation: stretch 2s ease infinite;
    -moz-animation: stretch 2s ease infinite;
    -o-animation: stretch 2s ease infinite;
    animation: stretch 2s ease infinite;
}
@-webkit-keyframes stretch {
    25% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        -webkit-clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
        clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
    }
}
@-moz-keyframes stretch {
    25% {
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93);
    }
    50% {
        -moz-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
    }
    75% {
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
    }
}
@-o-keyframes stretch {
    25% {
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93);
    }
    50% {
        -o-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
    }
    75% {
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
    }
}
@keyframes stretch {
    25% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        -moz-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        -o-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
        -webkit-clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
        clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
    }
}

li:nth-child(2):after {
    -webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
    clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
    height: 55px;
    width: 75px;
    bottom: -18px;
    -webkit-animation: stretch2 1.5s ease infinite;
    -moz-animation: stretch2 1.5s ease infinite;
    -o-animation: stretch2 1.5s ease infinite;
    animation: stretch2 1.5s ease infinite;
}
@-webkit-keyframes stretch2 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
        clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        -webkit-clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
        clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
    }
}
@-moz-keyframes stretch2 {
    25% {
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
    }
    75% {
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
    }
}
@-o-keyframes stretch2 {
    25% {
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
    }
    75% {
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
    }
}
@keyframes stretch2 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
        clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        -webkit-clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
        clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
    }
}

li:nth-child(3):after {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
    height: 55px;
    width: 45px;
    bottom: -18px;
    -webkit-animation: stretch3 2s ease infinite;
    -moz-animation: stretch3 2s ease infinite;
    -o-animation: stretch3 2s ease infinite;
    animation: stretch3 2s ease infinite;
}
@-webkit-keyframes stretch3 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
        clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
    }
}
@-moz-keyframes stretch3 {
    25% {
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
    }
    75% {
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
    }
}
@-o-keyframes stretch3 {
    25% {
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
    }
    75% {
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
    }
}
@keyframes stretch3 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
        clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
        -o-transform: translateX(-50%) rotate(3deg) scale(1.05);
        transform: translateX(-50%) rotate(3deg) scale(1.05);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
    }
}

li:nth-child(4):after {
    -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    height: 55px;
    width: 45px;
    bottom: -18px;
    -webkit-animation: stretch4 2s ease infinite;
    -moz-animation: stretch4 2s ease infinite;
    -o-animation: stretch4 2s ease infinite;
    animation: stretch4 2s ease infinite;
}
@-webkit-keyframes stretch4 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
}
@-moz-keyframes stretch4 {
    25% {
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
    75% {
        -moz-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
}
@-o-keyframes stretch4 {
    25% {
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
    75% {
        -o-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
}
@keyframes stretch4 {
    25% {
        -webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        -o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
        transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
    }
    50% {
        -webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
        -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        -moz-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        -o-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        transform: translateX(-50%) rotate(3deg) scaleY(1.05);
        -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
        clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
    }
}

li:hover:after {
    -webkit-animation: boink 1s ease forwards 1;
    -moz-animation: boink 1s ease forwards 1;
    -o-animation: boink 1s ease forwards 1;
    animation: boink 1s ease forwards 1;
}
@-webkit-keyframes boink {
    80% {
        -webkit-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
    }
}
@-moz-keyframes boink {
    80% {
        -moz-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
    }
}
@-o-keyframes boink {
    80% {
        -o-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
    }
}
@keyframes boink {
    80% {
        -webkit-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        -moz-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        -o-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
        transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
    }
}

@media (max-width: 600px) {
    li {
        font-size: 15px;
    }
}

HTML
CSS

Представленный фрагмент кода является изящным примером того, как HTML и CSS могут совместно создавать интерактивные и визуально привлекательные веб-компоненты, в частности, анимированное меню. Это меню, структурированное с использованием элементов HTML <nav> и <ul>, создает горизонтальную компоновку, которая одновременно функциональна и стилистична. Ясно, что пункты меню, такие как «Главная», «О нас», «Контакты» и «Карьера», разработаны так, чтобы их было легко доступно и просто для пользователей, навигирующих по сайту.

Затем на сцену выходит CSS, добавляя стиль и движение. Использование свойств, таких как display: flex;, гарантирует, что пункты меню выровнены горизонтально, достигая желаемой компоновки. Но настоящая магия происходит благодаря анимации. С помощью анимаций CSS каждый пункт меню может трансформироваться при взаимодействии, например, изменять цвет или размер при наведении, создавая динамичный пользовательский опыт, который не только визуально привлекателен, но и интерактивен.

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