<div class="mobile">
    <label class="mobile__label" for="checkbox">
      <div class="mobile__label__content">
        <span class="label__line"></span>
        <span class="label__line"></span>
      </div>
      <div class="mobile__label__content">
        <span class="label__line"></span>
        <span class="label__line"></span>
      </div>
      <div class="mobile__label__content">
        <span class="label__line"></span>
        <span class="label__line"></span>
      </div>
    </label><!--mobile__label-->
    <input class="mobile__input" type="checkbox" id="checkbox" />
    <nav class="mobile__nav">
      <ul>
        <li class="nav__item"><a href="#">Home</a></li>
        <li class="nav__item"><a href="#">Code</a></li>
        <li class="nav__item"><a href="#">Download</a></li>
        <li class="nav__item"><a href="#">Features</a></li>
        <li class="nav__item"><a href="#">Community</a></li>
        <li class="nav__item"><a href="#">Blog</a></li>
      </ul>
    </nav><!--mobile__nav-->
  </div><!--mobile-->

<a href="https://github.com/jokinL/Mobil-menu" class="github">
  In GitHub
</a>

@import url("https://fonts.googleapis.com/css?family=Dosis:600");

/*VARIABLES*/
/*Colors*/
@white:      #fff;
@bkg:        #493458;
@redBlack:   #BE4856;
@yellow:     #FFB440;
/*Fonts*/
@webFont:    'Dosis', sans-serif;

/*MIXINS*/
#noMargin{
  margin:   0px;
  padding:  0px;
}
#lineStyle{
  background-color: @white;
  width:24px;
  height:2px;
}

/*----- GENERAL -*/
*{
  #noMargin();
}
body{
  font-family:      @webFont;
  color:            @white;
  background-color: @bkg;
  #noMargin();
}
ul,li{
  #noMargin();
  list-style:none;
}

/*-----------------------------------------------
MOBILE
Content of mobile menu
-----------------------------------------------*/
.mobile{
  padding:40px;
}

/*-----------------------------------------------
LABEL
-----------------------------------------------*/
.mobile__label{
  border:solid 2px white;
  display:inline-block;
  overflow:hidden;
  padding:12px 9px;
  width:25px;
  white-space: nowrap;
  &:hover{
    cursor:pointer;
    /*ANIMAION POSITION ON HOVER*/
    .label__line{
      margin-left:0px;
    }
    /*ANIMATION DELAY*/
    :nth-child(2){
      .label__line{
        transition-delay:.1s;
      }
    }
    :nth-child(3){
      .label__line{
        transition-delay:.2s;
      }
    }
  }
}
  /*LINES CONTENT*/
  .mobile__label__content{
    font-size: 0;
    line-height: 0;
    height: 2px;
    margin-bottom: 5px;
    &:last-child{
      margin-bottom: 0px;
    }
  }
  /*WHITE LINES*/
  .label__line{
    #lineStyle();
    display:inline-block;
    margin-left: -33px;
    margin-right: 43px;
    /*LINES ANIMATION*/
    transition: margin-left .2s linear;
  }

/*-----------------------------------------------
INPUT
-----------------------------------------------*/
.mobile__input{
    display:none;
}

/*-----------------------------------------------
NAV
-----------------------------------------------*/
.mobile__nav{
  margin-top: 10px;
  max-height:0;
  max-width:0;
  overflow: hidden;
  transition: max-height 1s linear, max-width .8s linear;
}
  .nav__item{
    white-space: nowrap;
    a{
      text-decoration:none;
      display:block;
      padding: 5px 0px;
      color:@white;
      &:after{
        display:block;
        width:15px;
        height:2px;
        background-color:@white;
        content:'';
      }
    }
  }
.mobile__input:checked+.mobile__nav{
  max-width:150px;
  max-height:200px;
}
/*-----------------------------------------------
GITHUB
-----------------------------------------------*/
.github{
  display:inline-block;
  padding:10px 15px;
  border-radius:3px;
  border: solid 1px @white;
  color:@white;
  text-decoration:none;
  position: absolute;
  bottom: 40px;
  right:40px;
  text-transform:uppercase;
  /*ANIMATION*/
  transition: all 1s linear;
  &:hover{
    border: solid 1px @yellow;
    background-color: @yellow;
  }
}

/*
You can clone, donwload, fork... this mobile menu in GitHub.
https://github.com/jokinL/Mobil-menu

www.tesokdesign.es
https://tesokdesign.tumblr.com
*/