desirelabs
12/6/2017 - 5:47 AM

Pure css off-canvas menu

style.scss
content_copyfile_download
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

@mixin animation() {  
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

.button-group{
  position: absolute;
  width: 65px;
  height: 65px;
  top: 0;
  left: 300px;
  margin: 8px; /* just to give some space*/
  @include animation();
}

.menu-button {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  background-color: #000;
  text-align: center;
  color: #fff; 
  border-radius: 50%;
  left: 0;
  top: 0;
  span {
    display: block;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    @include animation();

    .fa-times {
      display: none;
    }
  }
  /* put this one in background */
  &.off {
    z-index: -1;
  }
}

#menu {
  position: absolute;
  height: 100vh;
  width: 300px;
  margin: 0;
  background-color: #000;
  transform: translateX(0);
  a {
    color:#fff;
    font-family: Cutive Mono;
    text-decoration: none;
  }
  @include animation();
  
  &:target {
    transform: translateX(-100%);
    +.button-group {
      left: 0;
      /* target the "visible" button */
      .menu-button:first-child {
        span {
          .fa-times {
            display: block;
          }
          .fa-bars {
            display: none;
          }
        }
      }
      	
      /* now put forefront to trigger close */
      .off {
        z-index: 0;
        background-color: transparent;
      }
    }
  }
}
index.html
content_copyfile_download
<!doctype>
<html>
<body>
  <div id="menu">
    <ul>
      <li><a href="">Lorem.</a></li>
      <li><a href="">Suscipit!</a></li>
      <li><a href="">Sapiente.</a></li>
    </ul>
  </div>

  <div class="button-group">  
    <a class="menu-button" href="#menu">
      <span>
      	<i class="fa fa-bars" aria-hidden="true"></i>
      	<i class="fa fa-times" aria-hidden="true"></i>
      </span>
    </a>
    <a class="menu-button off" href="#off-menu"></a>
  </div>
</body>
</html>