"Hamburger" Icon Animations.

"Hamburger" Icon Animations. Hamburger icon for navigation.

by velo_ninja

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>
"Hamburger" Icon Animations.
</h1>
<div id="menu-icon-1" class="hamburger-icon">
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="menu-icon-2" class="hamburger-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="menu-icon-3" class="hamburger-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.hamburger-icon {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  cursor: pointer;
  float:left;
  margin:10px 40px;
}

/* Icon 1 */

#menu-icon-1 span, #menu-icon-3 span, #menu-icon-4 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #cc0000;
  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;
}

#menu-icon-1 span:nth-child(2) {
  top: 0px;
}

#menu-icon-1 span:nth-child(2) {
  top: 18px;
}

#menu-icon-1 span:nth-child(3) {
  top: 36px;
}

#menu-icon-1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#menu-icon-1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#menu-icon-1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* Color option */
#menu-icon-1 span{background: #cc0000;}
#menu-icon-2 span{background: #0099CC;}
#menu-icon-3 span{background: #000;}

JavaScript

$(document).ready(function(){
	$('#menu-icon-1,#menu-icon-2,#menu-icon-3').click(function(){
		$(this).toggleClass('open');
	});
});