Menu Button Animation

by Arlina Fitriyani

HTML

<div class="wrapper">
  <div class="menu-1" data-menu="1"></div>
  <div class="menu-2" data-menu="2"></div>
  <div class="menu-3" data-menu="3"></div>
  <div class="menu-4" data-menu="4"></div>
</div>

CSS

html, body {
  background-color: cornflowerblue;
}

.wrapper {
  width: 600px;
  margin: 50px auto;
}

.menu-1, .menu-2,
.menu-3, .menu-4 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 50px;
  cursor: pointer;
  transition: all 0.3s;
}
.menu-1:before, .menu-1:after, .menu-2:before, .menu-2:after,
.menu-3:before,
.menu-3:after, .menu-4:before, .menu-4:after {
  content: "";
  position: absolute;
  transition: all 0.3s;
}

.menu-4 {
  top: -10px;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid #fff;
}
.menu-4:hover {
  border-bottom-color: #fafafa;
}
.menu-4:hover:before, .menu-4:hover:after {
  background-color: #fafafa;
}
.menu-4:before, .menu-4:after {
  background-color: #fff;
  height: 4px;
  width: 30px;
  top: 50%;
  left: 50%;
  margin-left: -15px;
}
.menu-4:before {
  margin-top: -10px;
}
.menu-4:after {
  margin-top: 3px;
}

.menu-4-active {
  top: 0;
  margin-left: 38px;
  height: 50px;
  width: 50px;
  border: 0;
  background-color: #98b7ee;
}
.menu-4-active:before, .menu-4-active:after {
  background-color: #fff !important;
  margin-left: -15px !important;
  margin-top: -2px !important;
}
.menu-4-active:before {
  transform: rotate(45deg) !important;
}
.menu-4-active:after {
  transform: rotate(-45deg) !important;
}

.menu-3 {
  background-color: #fff;
  width: 50px;
  height: 50px;
}
.menu-3:hover {
  background-color: #a4c0f2;
}
.menu-3:before, .menu-3:after {
  background-color: #6495ed;
  height: 4px;
  width: 30px;
  top: 50%;
  left: 50%;
  margin-left: -15px;
}
.menu-3:before {
  margin-top: -6px;
}
.menu-3:after {
  margin-top: 4px;
}

.menu-3-active {
  border-radius: 40px;
  background-color: #a4c0f2 !important;
}
.menu-3-active:before, .menu-3-active:after {
  background-color: #fff;
  margin-left: -15px !important;
  margin-top: -2px !important;
}
.menu-3-active:before {
  transform: rotate(45deg) !important;
}
.menu-3-active:after {
  transform: rotate(-45deg) !important;
}

.menu-2 {
 ...

JavaScript

var menu = $('.wrapper div');

menu.on('click', function() {
  var menuNum = $(this).data('menu');
  $(this).toggleClass('menu-'+ menuNum +'-active');
})