input(type="checkbox" id="check")
label(for="check")
  svg(viewBox="0 0 30 30" width="30" height="30")
    path#one(
    d="M4 10h22M4"
    stroke="#fff"
    stroke-width="2"
    stroke-linecap="round"
    )
    path#two(
    d="M4 20h22M4"
    stroke="#fff"
    stroke-width="2"
    stroke-linecap="round"
    )
  |  Click me

aside
  .top
    h2 Title
    ul
      - for (var x=0;x<5;x++)
        li Nav text
  .bottom
    p &copy; 2019 by Andrej Sharapov
article
  .wrapper
    .content
      h1 Off-Canvas menu on Pure CSS
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident rerum unde porro consequatur doloribus ex distinctio similique, voluptas repellendus voluptates nam dolorum! Repudiandae maxime, itaque vero dolorem distinctio inventore explicabo!
      p Odio eaque cum blanditiis esse, earum saepe voluptate quae aliquid possimus facere non qui illo necessitatibus eveniet ab sit quaerat. Atque animi nulla veritatis molestiae qui ipsam ut assumenda facilis?
    .footer
      p Follow me 
        a(href="https://twitter.com/andrejsharapov" target="_blank" title="") in Twitter
View Compiled
@import url('https://fonts.googleapis.com/css?family=Signika');

$light: #fff;
$dark: #21213d;
$col1: #1cc7d0;
$col2: #2ede98;
$col3: #3369e7;

$time: 500ms;
$cubic: cubic-bezier(0.06, 0.63, 0.91, 0.66);

$aside: 25vw;
$size: 0.25em;

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  line-height: 1.5;
  font-family: 'Signika', cursive;
  font-weight: 300;
  background-color: $dark;
  color: $light;
}

a {
  text-decoration: none;
  color: $col3;
}

#check {
  display: none;

  + label {
    position: absolute;
    top: $size * 4;
    left: $size * 4;
    z-index: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
    
    &::before {
      position: absolute;
      content: '';
      top: -1em;
      left: -1em;
      width: 100vw;
      height: 100vh;
      background-color: rgba($dark, 0.5);
      transform-origin: 50% 50%;
      transform: scale(1.3);
      visibility: hidden;
      opacity: 0;
      transition: all $time / 2 linear;
    }

    svg {
      margin-right: 0.5em;
      
      path {
        transform-origin: 35% 50%;
        transition: transform $time / 3 $cubic;
      }
    }
  }

  &:checked + label {
     ~ aside {
      transform: none;
    }
    
    &::before {
      left: calc(25vw - 1em);
      transform: scale(1);
      visibility: visible;
      opacity: 1;
      
      @media (max-width: 576px) {
        left: calc(50vw - 1em);
      }
    }
    
    svg {
      #one {
        transform: rotate(45deg);
      }
      #two {
        transform: rotate(-45deg);
      }
    }
  }

  &:checked + label {
    ~ article {
      z-index: -1; // set value in case of position transform-origin: x -* %
      transform: translateX(25vw) scale(0.7);
      border-radius: $size;
      user-select: none;
      pointer-events: none;
    }
  }
}

aside,
article {
  padding: ($size * 10) ($size * 4) $size;
  transition: all $time / 2 $cubic;
}

aside {
  position: absolute;
  width: $aside;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-image: linear-gradient(
    45deg, 
    $col3, 
    $col2
  );
  transform: translateX(-100%);
    
  @media (max-width: 576px) {
    width: $aside * 2;
  }
}

article {
  position: relative;
  transform-origin: 10% 50%; // change for position
  width: 100%;
  background-image: linear-gradient(
    45deg,
    $col1,
    $col2
  );

  .wrapper {
    margin: auto;
    padding: 2em;
    max-width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    h1 {
      margin: 0;
    }
    
    .footer {
      text-align: right;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.