By Ace Long


2018-07-11 23:33:07 8 Comments

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

4 comments

@dysfunc 2018-07-12 00:08:04

HTML

<ul class="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

jQuery

$(document).ready(function(){
  $('.menu').click(function(){
    $(this).toggleClass('open');
  });
});

Vanilla JS

document.addEventListener('DOMContentLoaded', function(){    
  var menus = document.querySelectorAll('.menu');

  var onClick = function(){
    this.classList.toggle('open');
  }

  menus.forEach(function(menu, index){
    menu.addEventListener('click', onClick);
  });
});

CSS

.menu {
  cursor: pointer;
  height: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 60px;
  position: relative;
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
     -moz-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
}

.menu li {
  background: #2683ff;
  border-radius: 4px;
  display: block;
  height: 9px;
  left: 0;
  margin: 0;
  opacity: 1;
  padding: 0;
  position: absolute;
  width: 100%;
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
     -moz-transition: .15s ease-in-out;
       -o-transition: .15s ease-in-out;
          transition: .15s ease-in-out;
} 

.menu li:nth-child(1) {
  top: 0;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu li:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu li:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu.open li:nth-child(1) {
  left: 8px;
  top: -2px;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.menu.open li:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu.open li:nth-child(3) {
  left: 8px;
  top: 40px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

Let me know if this is what you're looking for - Live Example

@MajiD 2018-07-11 23:57:52

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>

@Bezlonir 2018-07-11 23:56:46

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.

@Samyok Nepal 2018-07-11 23:49:55

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>

@Ace Long 2018-07-11 23:51:36

// Thank-you! I definitely noticed that it was supposed to be . instead of : and the toggleclass is what I needed.

Related Questions

Sponsored Content

18 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

30 Answered Questions

15 Answered Questions

[SOLVED] How can I select an element by name with jQuery?

43 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

28 Answered Questions

[SOLVED] How can I upload files asynchronously?

21 Answered Questions

[SOLVED] How can I make the cursor a hand when a user hovers over a list item?

  • 2010-06-21 19:45:44
  • user246114
  • 1531657 View
  • 1522 Score
  • 21 Answer
  • Tags:   css

17 Answered Questions

[SOLVED] How can I get the ID of an element using jQuery?

10 Answered Questions

38 Answered Questions

16 Answered Questions

[SOLVED] How to get the children of the $(this) selector?

Sponsored Content