Анимированное меню гамбургера

Анимированные навигационные бары почти стали необходимостью, когда речь заходит о контенте, который вы предоставляете конечным пользователям. Теперь я знаю, что мы все немного предвзяты в этом для обеих сторон, но на мгновение обнажены со мной … Мы все видели меню гамбургера. Когда вы нажимаете на один, он либо вообще не двигается, либо это быстрый переход на жир X без перехода вообще. Я имею в виду … что дает!? Можем ли мы добавить немного, вы знаете, вау?

Давайте рассмотрим один способ! Проверьте мой по этой ссылке Анкет Это мое текущее портфолио, я в процессе разработки Анкет Я собираюсь научить вас, как оживить меню гамбургера.

Также вот Codepen Чтобы следовать. Я до сих пор предлагаю написать это, хотя, когда вы читаете!

Примечание: я не преподаю раскрывающуюся часть меню … Но, если вы оставите комментарий, выражающий интерес … Я рассмотрю вопрос о написании блога, посвященного этой функциональности. 😉

Первое, что вы собираетесь сделать, это создать три девчонка . В идеале вы хотите эти divs идти в твоем NAVBAR , но мы просто сосредоточимся на создании этой работы. Вам понадобится index.html файл. Назовите это как хотите.

Далее поместите divs Внутри с предоставленным шаблоном и занятиями:

Как видите, мы изначально пометили каждый Div с классом один , два и Три Анкет Каждый из этих DOV будет представлять один из трех баров в меню гамбургеров. Теперь давайте добавим немного стиля, чтобы сделать все видимыми.

Создать index.css Подайте и свяжите его в своем index.html файл. Как только вы это сделаете, примените этот стиль:

html {
  background-color: black;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
}

.one, .two, .three {
        width: 45px;
        height: 3px;
        margin-bottom: 8px;
        background-color: aqua;
        border-radius: 20px;
        box-shadow: 0 0 5px aqua;
 }

Идеально, теперь у вас должен быть черный фон со светящимся меню гамбургера. 😄 пока ничего не работает, но теперь вы можете, по крайней мере, увидеть все. Не стесняйтесь играть с цветами, если хотите сделать это своим. Если до этого момента все прошло хорошо, мы можем перейти к анимационной части.

Мы хотим, чтобы наши пользователи знали, что меню гамбургера можно щелкнуть! Лучший способ сделать это – это изменить курсор, когда он зависает над ним. В вашем файле CSS примените этот новый класс недвижимости:

.menu:hover {
    cursor: pointer
}

Достаточно просто, верно?

Далее мы собираемся создать некоторые свойства CSS для классов, которых еще не существует – .активный Анкет Они будут существовать, как только мы добавим события Click, но сейчас … просто поверьте мне в этом. Я не разочаровываю!

Добавьте их в свой файл CSS:

.one.active {
  transform: translate(0, 14px) rotate(45deg);
}

.two.active {
  background-color: transparent;
  box-shadow: none;
  transform: translateX(-55px);
}

.three.active {
  transform: translate(0, -8px) rotate(-45deg);
}

Теперь мы собираемся заставить это работать! Создать index.js Подайте и свяжите его в своем index.html файл. Для этой конкретной анимации не требуется много кода. Поместите это в свой index.js :

const menu = document.querySelector(".menu");

menu.addEventListener("click", () => {
  const activeElements = document.querySelectorAll(".active-element");
    for(let i = 0; i < activeElements.length; i++) {
        activeElements[i].classList.toggle("active");
    }
});

Попробуйте нажать на меню гамбургера.

Хузза, это работает!

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

Переход: XXXMS

В этом случае вам просто нужно добавить Переход: 300 мс к .one, .two, .three {} в вашем файле CSS.

Этот последний список свойств выглядит следующим образом:

.one, .two, .three {
    transition: 300ms;
    width: 45px;
    height: 3px;
    margin-bottom: 8px;
    background-color: aqua;
    border-radius: 20px;
    box-shadow: 0 0 5px aqua;
}

Проверьте это! Вы будете поражены тем, насколько это было легко.

Оказывается, анимация на самом деле не так уж и сложна. Это не значит, что анимация не может стать сложной, но я чувствую, что некоторые начинающие разработчики дают ему плохой повторение. Как бы то ни было, я надеюсь, что это окажется полезным для всех вас. Ваше здоровье!

Оригинал: “https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn”