我的导航栏按钮动画不工作
My animation for my navbar button is not working
在这个动画中,当你点击汉堡包按钮时,中间的条应该消失,这已经发生了,剩下的两条线没有做任何事情,它们应该旋转 45 度,所以它们变成了X。我尝试更改 Javascript 上的块顺序,但这不起作用。就像我上面说的,中间的线在工作,其他两个没有。
到目前为止,这是我的代码:
function toggleNav() {
document.getElementById("menu").classList.toggle("active");
document.getElementById("menu-button").classList.toggle("open");
}
* {
margin: 0;
padding: 0;
}
#menu {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
margin-top: 50px;
width: 400px;
height: 100%;
background: #dcfa71;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
#menu.active {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
#menu ul li {
list-style-type: none;
color: #425c45;
font-size: 2.5rem;
padding: 18px 28px;
}
#menu ul li:hover {
color: #1dd820;
cursor: pointer;
}
#menu .menu-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 35px;
left: 435px;
z-index: 1;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button {
margin-top: 50px;
margin-left: 20px;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before, #menu-button::after {
content: '';
position: absolute;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
#menu-button::after {
-webkit-transform: translateY(24px);
transform: translateY(24px);
}
#menu-button.open {
-webkit-transform: translateX(300px);
transform: translateX(300px);
background: transparent;
}
#menu-button.open #menu-button::before {
-webkit-transform: rotate(45deg) translate(35px, -35px);
transform: rotate(45deg) translate(35px, -35px);
}
#menu-button.open #menu-button::after {
-webkit-transform: rotate(-45deg) translate(35px, 35px);
transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sliding menu</title>
</head>
<body>
<div class="menu-button" id="menu-button" onclick="toggleNav()">
</div>
<div id="menu" class="menu" >
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
将 CSS 中的选择器更改为 #menu-button.open::before
和 #menu-button.open::after
。
function toggleNav() {
document.getElementById("menu").classList.toggle("active");
document.getElementById("menu-button").classList.toggle("open");
}
* {
margin: 0;
padding: 0;
}
#menu {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
margin-top: 50px;
width: 400px;
height: 100%;
background: #dcfa71;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
#menu.active {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
#menu ul li {
list-style-type: none;
color: #425c45;
font-size: 2.5rem;
padding: 18px 28px;
}
#menu ul li:hover {
color: #1dd820;
cursor: pointer;
}
#menu .menu-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 35px;
left: 435px;
z-index: 1;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button {
margin-top: 50px;
margin-left: 20px;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before, #menu-button::after {
content: '';
position: absolute;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
#menu-button::after {
-webkit-transform: translateY(24px);
transform: translateY(24px);
}
#menu-button.open {
-webkit-transform: translateX(300px);
transform: translateX(300px);
background: transparent;
}
#menu-button.open::before {
-webkit-transform: rotate(45deg) translate(35px, -35px);
transform: rotate(45deg) translate(35px, -35px);
}
#menu-button.open::after {
-webkit-transform: rotate(-45deg) translate(35px, 35px);
transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sliding menu</title>
</head>
<body>
<div class="menu-button" id="menu-button" onclick="toggleNav()">
</div>
<div id="menu" class="menu" >
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
在这个动画中,当你点击汉堡包按钮时,中间的条应该消失,这已经发生了,剩下的两条线没有做任何事情,它们应该旋转 45 度,所以它们变成了X。我尝试更改 Javascript 上的块顺序,但这不起作用。就像我上面说的,中间的线在工作,其他两个没有。
到目前为止,这是我的代码:
function toggleNav() {
document.getElementById("menu").classList.toggle("active");
document.getElementById("menu-button").classList.toggle("open");
}
* {
margin: 0;
padding: 0;
}
#menu {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
margin-top: 50px;
width: 400px;
height: 100%;
background: #dcfa71;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
#menu.active {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
#menu ul li {
list-style-type: none;
color: #425c45;
font-size: 2.5rem;
padding: 18px 28px;
}
#menu ul li:hover {
color: #1dd820;
cursor: pointer;
}
#menu .menu-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 35px;
left: 435px;
z-index: 1;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button {
margin-top: 50px;
margin-left: 20px;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before, #menu-button::after {
content: '';
position: absolute;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
#menu-button::after {
-webkit-transform: translateY(24px);
transform: translateY(24px);
}
#menu-button.open {
-webkit-transform: translateX(300px);
transform: translateX(300px);
background: transparent;
}
#menu-button.open #menu-button::before {
-webkit-transform: rotate(45deg) translate(35px, -35px);
transform: rotate(45deg) translate(35px, -35px);
}
#menu-button.open #menu-button::after {
-webkit-transform: rotate(-45deg) translate(35px, 35px);
transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sliding menu</title>
</head>
<body>
<div class="menu-button" id="menu-button" onclick="toggleNav()">
</div>
<div id="menu" class="menu" >
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
将 CSS 中的选择器更改为 #menu-button.open::before
和 #menu-button.open::after
。
function toggleNav() {
document.getElementById("menu").classList.toggle("active");
document.getElementById("menu-button").classList.toggle("open");
}
* {
margin: 0;
padding: 0;
}
#menu {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
margin-top: 50px;
width: 400px;
height: 100%;
background: #dcfa71;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
#menu.active {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
#menu ul li {
list-style-type: none;
color: #425c45;
font-size: 2.5rem;
padding: 18px 28px;
}
#menu ul li:hover {
color: #1dd820;
cursor: pointer;
}
#menu .menu-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 35px;
left: 435px;
z-index: 1;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button {
margin-top: 50px;
margin-left: 20px;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before, #menu-button::after {
content: '';
position: absolute;
width: 70px;
height: 14px;
background: black;
border-radius: 5px;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#menu-button::before {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
#menu-button::after {
-webkit-transform: translateY(24px);
transform: translateY(24px);
}
#menu-button.open {
-webkit-transform: translateX(300px);
transform: translateX(300px);
background: transparent;
}
#menu-button.open::before {
-webkit-transform: rotate(45deg) translate(35px, -35px);
transform: rotate(45deg) translate(35px, -35px);
}
#menu-button.open::after {
-webkit-transform: rotate(-45deg) translate(35px, 35px);
transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sliding menu</title>
</head>
<body>
<div class="menu-button" id="menu-button" onclick="toggleNav()">
</div>
<div id="menu" class="menu" >
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>