Mobile menu: hamburger icon and off-canvas navigation

Inspiration: open_in_new SVG Hamburger Menu Icon Animation Collection .

Markup

<nav id="menu">
    <a href="#">Home</a>
    <a href="#">Company</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</nav>

<div class="mobile-menu">
    <i></i>
    <i></i>
    <i></i>
</div>

Button (Less)

Uses Bootstrap-style breakpoint variables (@screen-sm-min) and theme color variables:

.mobile-menu {
  display: block;

  @media (min-width: @screen-sm-min) {
    display: none;
  }

  position: relative;
  cursor: pointer;
  width: 45px;
  height: 25px;
  float: right;
  margin: 30px 10px 0 0;
  z-index: 999999;

  i {
    background-color: @color-main;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;

    &:nth-child(1) {
      animation: outT 0.8s backwards;
      animation-direction: reverse;
    }

    &:nth-child(2) {
      margin: 5px 0;
      animation: outM 0.8s backwards;
      animation-direction: reverse;
    }

    &:nth-child(3) {
      animation: outBtm 0.8s backwards;
      animation-direction: reverse;
    }
  }

  &.active {
    i {
      &:nth-child(1) {
        animation: inT 0.8s forwards;
      }
      &:nth-child(2) {
        animation: inM 0.8s forwards;
      }
      &:nth-child(3) {
        animation: inBtm 0.8s forwards;
      }
    }
  }
}

@keyframes inM {
  50% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

@keyframes outM {
  50% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

@keyframes inT {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(9px) rotate(0deg); }
  100% { transform: translateY(9px) rotate(135deg); }
}

@keyframes outT {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(9px) rotate(0deg); }
  100% { transform: translateY(9px) rotate(135deg); }
}

@keyframes inBtm {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(0deg); }
  100% { transform: translateY(-9px) rotate(135deg); }
}

@keyframes outBtm {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(0deg); }
  100% { transform: translateY(-9px) rotate(135deg); }
}

Menu panel (Less)

#menu {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  height: 100%;
  padding-top: 30px;
  background: @color-background;
  border-right: 2px solid #a7a7a7;
  transition: left 300ms ease;

  @media (min-width: @screen-sm-min) {
    margin-top: 27px;
    position: initial;
    width: auto;
    line-height: normal;
    background: none;
    display: block;
    padding-top: 0;
    border-right: none;
    float: right;
  }

  a {
    display: block;
    margin-top: 15px;
    color: @color-light;
    font-size: 32px;

    @media (min-width: @screen-sm-min) {
      display: inline;
      margin-top: 0;
      color: @color-main;
      font-size: 16px;
    }
  }

  &.opened {
    left: 0;
  }
}

Toggle script

$(function () {
    $('.mobile-menu').click(function () {
        $(this).toggleClass('active');
        $('#menu').toggleClass('opened');
    });
});