В статье подробно описано, это как вы можете создать анимационные знаки гамбургера для навигационного меню, который в своей основе идет под мобильные устройства. Если подробно, то в статье мы создаем анимацию Pure CSS Hamburger Menu. Мы покажем вам лучший способ создания анимации меню с минимальным кодом. Существуют тысячи учебных пособий и код для создания этого эффекта, но эта статья немного отличается. Что здесь немного отличается.
Вы можете найти много кода меню с использованием трех тегов. В этой статье мы покажем вам лучший способ создания меню переключения только с одним тегом. Тег span просто представляет каждую строку меню. Где не говорим, что эти три тега span не являются гибкими. Это так, но мы покажем вам лучший способ создания анимации меню Pure CSS Hamburger.
В этом уроке мы превратим меню гамбургеров в знак плюс. Поэтому, когда вы нажимаете на меню гамбургера, это преобразуется в знак плюс. Мы используем CSS для создания плавного перехода и анимации. Мы также JavaScript, чтобы создать событие клика в меню hamburger. Эффект наведения также используется здесь, но это не удобно для пользователя. Теперь просто посмотрите на пример.
1. В приведенном выше коде мы удалим отступы и поля из тега body и добавим семейство шрифтов для текста.
2. Мы используем контейнерный класс для центрирования текста и элемента HTML.
3. Создайте класс с переключателем после и до, где класс создаст три полосы одного цвета, высоты и ширины.
4. После этого мы разделим эти три бара, используя маржу и абсолютное позиционирование.
5. Создать после и перед селектором и указать абсолютную позицию и указать слева 0.
6. Здесь создали класс .show и изменили свойства значка переключения. Но почему нам нужно создать новый класс и изменить свойства значка переключения. Если вы измените эти свойства напрямую, это повлияет на меню переключения и унаследует его собственные свойства.
HTML
В этом коде мы добавляем тег script непосредственно перед закрывающим тегом body и добавляем функцию. Теперь с помощью этой функции мы создаем некоторый код, который добавляет и удаляет show class.
Назовите эту функцию и передайте событие параметра, где напишите метод e.classlist.toggle. Метод Toggle используется для удаления и добавления класса CSS.
Код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Plus Sign Animation</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="container" onclick="myFunction(this)">
<span class="toggle-icon"></span>
</div>
<script>
function myFunction(e){
e.classList.toggle("show");
}
</script>
</body>
</html>
CSS
Код
.toggle-icon,
.toggle-icon::before,
.toggle-icon::after{
content: "";
width: 180px;
height: 5px;
position: fixed;
background-color: white;
border: 1px solid white;
border-radius: 2em;
cursor: pointer;
transition: 0.4s ease;
}
.toggle-icon::before{
position: absolute;
left: 0;
margin-top: -3em;
}
.toggle-icon::after{
position: absolute;
left: 0;
margin-top: 3em;
}
.show .toggle-icon::after{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-top: 0em;
}
.show .toggle-icon{
background-color: transparent;
border: none;
}
.show .toggle-icon::before{
margin-top: 0em;
}
На этом мы завершаем строение этой анимацией при использование CSS для данного значения, где вы самостоятельно поэкспериментируйте с этим и создайте еще несколько эффектов.
Демонстрация
