CODEWITHSUNDEEP
cssanimationmenu
Bogdan Florin
Bogdan Florin

Reputation: 103

hamburger menu on close animation

I'm creating a hamburger menu but I have some problems with an animation. I created 2 divs, 1 for the 3 basic horizontal lines, and one for the " X ". I know how to hide and show them with jQuery ( like, one you click on the 3 lines, the 3 lines hides, and the " X " shows ) but I want to create an animation on that " X " like it's drawn both " \ " and " / " simultaneously. Like it stars from the top corner and it ends and the bottom. I don't really know how to explain this and my english is bad. here's what I did so far 

<div class="x"> 
 <div></div> 
 <div></div> 
</div>

and the CSS 

.x {
position: fixed;
top:47%;
left: 5%; }

.x div {
width: 40px;
height: 2px;
background-color: #000000; }

.x div:nth-child(1) {
transform: rotate(45deg); } 

.x div:nth-child(2) {
transform: rotate(-45deg); }

I tried to create an animation on each line which starts from witdh:0 ( 0% ) and witdh:40px ( 100% ) but because I used the transform property it doesn't animate the way I want, it changes the positions and stuff.
Ty and I'm really sorry, but I don't know how to explain this.

Upvotes: 0

Views: 1512

Answers (2)

dysfunc
dysfunc

Reputation: 2008

I think you're looking for something like this:

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);
  });
});
body {
  margin: 20px;
}

.menu {
  cursor: pointer;
  height: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30px;
  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-color: #111;
  border-radius: 4px;
  display: block;
  height: 4px;
  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: 9px;
  -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: 18px;
  -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: 4px;
  top: -1px;
  -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: 4px;
  top: 20px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
<ul class="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

with jQuery

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

Upvotes: 1

Ismail Alekperov
Ismail Alekperov

Reputation: 39

Bogdan. I made an example for you, if I correctly understood your question.

HTML:

<div id="hamburger" class="hamburger hamburger_active">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</div>

CSS:

.hamburger {
    width: 40px;
    height: 40px;
    position: fixed;
    top:50%;
    left: 50%;
    border: 1px solid red; 
}
.hamburger.hamburger_active .hamburger__line {
    width: 100%;
}

.hamburger__line {
    width: 0;
    height: 2px;
    position: absolute;
    transform-origin: 20px 0;
    top: 50%;
    left: 0;
    background-color: #000000;
    transition: width .3s ease;
}

.hamburger__line:nth-child(1) {
    transform: rotate(45deg);
} 

.hamburger__line:nth-child(2) {
    transform: rotate(135deg);  
}

jQuery:

var $menu = $("#hamburger");

$menu.click(function() {
    $(this).toggleClass('hamburger_active');
});

Upvotes: 0

Related Questions