<div class="mobile">
  <div class="mainContainer">
    <header>
      <a href="#" class="logo">logo</a>
      <a href="#" class="menuBtn">
        <span class="lines"></span>
      </a>
      <nav class="mainMenu">
        <ul>
          <li>
            <a href="#">Intro</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Team</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="#" class="suBtn">Sing Up</a>
          </li>
        </ul>
      </nav>
    </header>
    <div class="container">
    </div>
    <footer>
    </footer>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato);
* {
  margin: 0;
  padding: 0;
}
*, *:after, *:before {
  box-sizing: border-box;
}
ol, ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
html {
  line-height: 1.2;
}
body {
  background-color: #fff;
  color: #333;
  font-family: "Lato", arial, sans-serif;
  font-size: 16px;
}
.mobile {
  background-color: #19b698;
  border: 0 solid #333;
  border-width: 50px 15px;
  border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.6);
  margin: 20px auto;
  max-width: 300px;
  height: 560px;
  overflow: hidden;
  position: relative;
}
header {
  background-color: #fff;
  background-color: rgba(255,255,255,.0);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  height: 50px;
}
.logo {
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  padding: 0 0 0 20px;
  text-transform: capitalize;
}
/* menu button */
.menuBtn {
  height: 30px;
  width: 30px;

  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 101;
  > span {
    background-color: #fff;
    border-radius: 1px;
    height: 2px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -15px;
    transition: height 100ms;
    &:after, &:before {
      content: '';
      background-color: #fff;
      border-radius: 1px;
      height: 2px;
      width: 100%;
      position: absolute;
      left: 50%;
      margin-left: -15px;
      transition: all 200ms;
    }
    &:after {
      top: -7px;
    }
    &:before {
      bottom: -7px;
    }
  }
  &.act {
    > span {
      height: 0;
      &:after, &:before {
        background-color: #008877;
        top: 1px;
      }
      &:after {
        transform: rotate(45deg);
      }
      &:before {
        transform: rotate(-45deg);
      }
    }
  }
}
/* main menu block */
.mainMenu {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
  opacity: 0;
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0);
  &.act {
    opacity: 1;
    transform: scale(1);
    ul li {
    opacity: 1;
    transform: translateX(0);
  }
  }
  ul {
    display: table-cell;
    vertical-align: middle;
  }
  li {
    padding: 8px 0;
    transition: all 400ms 510ms;
    opacity: 0;
    &:nth-child(odd) {
      transform: translateX(30%);
    }
    &:nth-child(even) {
      transform: translateX(-30%);
    }
    &:last-child {
      transform: none;
    }
  }
  a {
    color: #19b698;
    display: inline-block;
    font-size: 18px;
    &.suBtn {
      color: #fff;
    }
  }

}
/* sign up button */
.suBtn {
  background-color: #19b698;
  border-radius: 5px;
  padding: 10px 20px;
}

$(document).ready(function(){
  // menu click event
  $('.menuBtn').click(function() {
    $(this).toggleClass('act');
      if($(this).hasClass('act')) {
        $('.mainMenu').addClass('act');
      }
      else {
        $('.mainMenu').removeClass('act');
      }
  });
});