burger menu

by shuja uddin

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="burger-menu">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

#burger-menu{
  position:relative;
}
#burger-menu span{
  display:block;
  position:relative;
  top:0;
  height:10px;
  width:80px;
  margin-bottom:10px;
  background-color:#000;
  
}
#burger-menu.active span:nth-child(2),#burger-menu.active span:nth-child(3){
  width:0;
  opacity:0;
  transition:all ease-in-out 0.4s;
  }
  #burger-menu.active span:nth-child(1){
  
  transform:rotate(-45deg);
  top:30px;
  }
  #burger-menu.active span:nth-child(4){
 transform:rotate(45deg);
 top:-30px;
  }

JavaScript

$(document).ready(function(){
$('#burger-menu').on('click',function(){
	$('#burger-menu').toggleClass('active');
})

});