Я пытаюсь анимировать свои бары i-класса, чтобы меню гамбургера вращалось и пересекалось при нажатии.
Я не смог найти способ оживить его, поэтому нашел это.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-
width,
initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform:
rotate(-45deg)
translate(-9px,
6px);
transform: rotate(-45deg)
translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform:
rotate(45deg)
translate(-8px, -8px);
transform: rotate(45deg)
translate(-8px, -8px);
}
</style>
</head>
<body>
<div class="container"
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div> <script>function
myFunction(x) {
x.classList.toggle
("change");
}
</script>
</body>
</html>
Проблема, с которой я столкнулся, заключается в том, как реализовать ее на моем сайте WordPress. Могу ли я положить его на домашнюю страницу и спрятать fa-bars, или есть способ как-то вставить его в мою голову и заменить оригинальный i class там, где сейчас находится значок? Как мне связать его с моим меню?
Попробовал, не получилось
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
</head>
<body>
<i class="fa bars" onclick="myFunction(this)">
<div class="fa bars"></div>
</div> <script>function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>