Menu CSS

by WILLIAM CORREA

HTML

<input type="checkbox" id="behavior" class="behavior">
<label class="menu-toggle" for="behavior">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</label>

CSS

body {
  margin: 10px 35px;
}
.behavior {
  display: none;
}
.menu-toggle {
  display: block;
  position: relative;
  width: 48px;
  height: 36px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: all .25s;
}
.icon-bar {
  display: block;
  height: 4px;
  width: 100%;
  background: #727272;
  border-radius: 8px;
  width: 48px;
  margin: 6px 0;
  transform: rotate(0deg);
  transition: all 0.25s;
}
.behavior:checked + .menu-toggle {
  background-color: transparent;
  border: 1px solid transparent;
}
.behavior:checked + .menu-toggle .icon-bar {
  top: 16px;
  position: absolute;
}
.behavior:checked + .menu-toggle .icon-bar:nth-child(1) {
  transform: rotate(-135deg);
}
.behavior:checked + .menu-toggle .icon-bar:nth-child(3) {
  transform: rotate(135deg);
}
.behavior:checked + .menu-toggle .icon-bar:nth-child(2) {
  transform: translate(-95px, 0);
  opacity: 0;
}