Question

我尝试了无数种不同的CSS和jquery建议，但没有一个得到解决。考虑到我当前的html和CSS，如何将汉堡菜单变成x？

我尝试使用css进行操作，使用旋转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;

}

这是codepen-> https://codepen.io/anon/pen/EpaGzq

Answer 1

将您的:active更改为.active，然后使用.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>

Answer 2

我想出了最好的方法，但是它非常脆弱：

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-toggle保持静态的大小。

Answer 3

更好

$(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>

我如何获得这个汉堡菜单变成x onclick？

3 个答案: