CODEWITHSUNDEEP
jqueryhtmlcss
Ace Long
Ace Long

Reputation: 57

How can I get this hamburger menu to turn into an x onclick?

I've tried countless different css and jquery suggestions, and none of them have been working out. Taking my current html and css into consideration, how can I turn my hamburger menu into an x?

I have tried doing it with css, using rotate 45 and -45, I have tried jquery, but I am just not doing it right. It doesn't stay active, and it is usually out of position.

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;

}

Here is the codepen --> https://codepen.io/anon/pen/EpaGzq

Upvotes: 2

Views: 3660

Answers (3)

MajiD
MajiD

Reputation: 2575

even better

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

Upvotes: 1

Bezlonir
Bezlonir

Reputation: 66

Best I could come up with, but it's very brittle:

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);
}

As for the JavaScript, you'd want to apply each one of those classes and remove them on click. I gather that you're trying to animate the hamburger into an X. The problem with the solution I proposed is that it is entirely dependent on the size of .acetrnt-toggle remaining static.

Upvotes: 1

samyok nepal
samyok nepal

Reputation: 557

Change your :actives to .actives and use .toggleClass to get the effect: 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>

Upvotes: 3

Related Questions