我怎么才能让这个汉堡菜单变成一个x onclick呢？
我怎么才能让这个汉堡菜单变成一个x onclick呢？
提问于 2018-07-12 07:33:08
我尝试了无数不同的css和jquery建议，但没有一个是可行的。考虑到我现在的html和css，我怎样才能把我的汉堡菜单变成x呢？
我尝试过使用css，使用rotate 45和-45，我也尝试过jquery，但我就是做得不对。它不会保持活动状态，并且通常处于不正确的位置。
HTML：
<body>
<div class="acetrnt-toggle" data-click-state="1">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
<div/>
</body>CSS：
body {
background: blue;
}
.acetrnt-toggle {
cursor: pointer;
padding: 15px;
width: 60px;
}
.line-1, .line-2, .line-3 {
cursor: pointer;
border-radius: 4px;
height: 5px;
width: 60px;
background: #000;
position: relative;
display: block;
content: '';
}
.acetrnt-toggle:hover span {
cursor: pointer;
background: #e7e7e7;
}
.line-1, .line-2 {
margin-bottom: 10px;
}
.line-1, .line-2, .line-3 {
transition: all 300ms ease-in;
}下面是代码--> https://codepen.io/anon/pen/EpaGzq
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-12 07:49:56
将您的:actives更改为.actives并使用.toggleClass获得效果：https://codepen.io/anon/pen/ZjYZaj
$(".acetrnt-toggle").click(function(){
$(this).toggleClass("active")
})body {
background: blue;
}
.acetrnt-toggle {
cursor: pointer;
padding: 15px;
width: 60px;
}
.line-1, .line-2, .line-3 {
cursor: pointer;
border-radius: 4px;
height: 5px;
width: 60px;
background: #000;
position: relative;
display: block;
content: '';
}
.acetrnt-toggle:hover span {
cursor: pointer;
background: #e7e7e7;
}
.line-1, .line-2 {
margin-bottom: 10px;
}
.line-1, .line-2, .line-3 {
transition: all 300ms ease-in;
}
.acetrnt-toggle.active .line-2 {
background-color: transparent;
}
.acetrnt-toggle.active .line-1 {
background: #fefefe;
top: 10px;
position: absolute;
}
.acetrnt-toggle.active .line-3 {
background: #fefefe;
bottom: 10px
position: absolute;
}
.acetrnt-toggle.active .line-1 {
transform: rotate(45deg);
top: 37px;
}
.acetrnt-toggle.active .line-3 {
transform: rotate(-45deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="acetrnt-toggle" data-click-state="1">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
<div/>
</body>
Stack Overflow用户
发布于 2018-07-12 07:56:47
我能想到的最好的，但它很脆弱：
html：
<div class="acetrnt-toggle" data-click-state="1">
<span class="line-1 left-slash"></span>
<span class="line-2 hide"></span>
<span class="line-3 right-slash"></span>
<div/>css：
.left-slash {
transform: rotate(45deg) translate(0px, 21px);
}
.hide {
visibility: hidden;
}
.right-slash {
transform: rotate(-45deg) translate(0px, -21px);
}至于JavaScript，您可能想要应用这些类中的每一个，并在单击时删除它们。我猜您正在尝试将汉堡动画化为X。我提出的解决方案的问题是，它完全依赖于.acetrnt的大小-切换保持静态。
Stack Overflow用户
发布于 2018-07-12 07:57:52
甚至更好
$(document).ready(function() {
$('#nav').click(function() {
$(this).toggleClass('open');
});
});#nav {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: blue;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav span:nth-child(1) {
top: 0px;
}
#nav span:nth-child(2),
#nav span:nth-child(3) {
top: 18px;
}
#nav span:nth-child(4) {
top: 36px;
}
#nav.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51295477
复制相关文章
相似问题