Mobile Menu Icon Prep

by Matthew Day

HTML

<div class="wrapper">
  <div class="mobileicon active"></div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  background: #1f2732;
  height: 400px;
  position: relative;
}  
  
.mobileicon {
  background: none;
  border: 0;
  border-bottom: 2px solid white;
  cursor: pointer;
  left: 16px;
  outline: 0;
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  transition: border-bottom 1s ease-in-out;
  width: 28px;
  &:-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  &:before {
    content: "";
    display: block;
    border-bottom: 2px solid crimson;
    position: absolute;
    top: -6px;
    width: 100%;
    transition: transform 0.5s ease-in-out;
  }
  &:after {
    content: "";
    display: block;
    border-bottom: 2px solid crimson;
    position: absolute;
    top: 6px;
    width: 100%;
    transition: transform 0.5s ease-in-out;
  }
  &.active {
    border-bottom: 2px solid white;
  }
  &.active:before {
    top: 0;
    transform: rotate(-405deg);
  }
  &.active:after {  // crimson
    top: 0;
    transform: rotate(405deg);
  }
}

JavaScript

// created to perfectly position three bars that animate the state of a mobile menu