<aside class="container">
  <input type="checkbox" id="menu__trigger">
  <section class="menu">
    <!--<label for="menu__trigger" class="entypo-cancel"></label>-->
    <nav>
      <a href="#">1. Menu Item</a>
      <a href="#">2. Menu Item</a>
      <a href="#">3. Menu Item</a>
      <a href="#">4. Menu Item</a>
      <a href="#">5. Menu Item</a>
      <a href="#">6. Menu Item</a>
      <a href="#">6. Menu Item</a>
      <a href="#">8. Menu Item</a>
    </nav>
  </section>
  
  <section class="content">
    <label for="menu__trigger" class="entypo-menu"></label>
    
    
    
    <h1>Off Canvas Menu Effect</h1>
    
    

  </section>
</aside>
@import "compass/css3";

// entypo
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html {
  min-height: 100%;
  min-width: 100%;

  body {
    min-height: 100%;
    min-width: 100%;
    
    font-family: 'Lato', sans-serif;
    
    input[type="checkbox"] {
      position: absolute;
    
      height: 0;
      width: 0;
      display: none;
      
      &:checked {
        & ~ .menu {
              nav {
                a {
                  -webkit-transform: translate3d(0px, 0, 0) rotateY(0deg);
                  transform: translate3d(0px, 0, 0) rotateY(0deg);
                  
                  -webkite-transform-style: preserve-3d;
                  transform-style: preserve-3d;
                  
                  -webkit-transition: all .4s ease-in-out;
                  transition: all .4s ease-in-out;
                  
                  background: #252525;
                  color: #fff;
                  
                  &:nth-child(2) {
                    -webkit-transition-delay: .1s;
                    transition-delay: .1s;
                  }
                  
                  &:nth-child(3) {
                    -webkit-transition-delay: .2s;
                    transition-delay: .2s;
                  }
                  
                  &:nth-child(4) {
                    -webkit-transition-delay: .3s;
                    transition-delay: .3s
                  }
                  
                  &:nth-child(5) {
                    -webkit-transition-delay: .4s;
                    transition-delay: .4s;
                  }
                  
                  &:nth-child(6) {
                    -webkit-transition-delay: .5s;
                    transition-delay: .5s
                  }
                  
                  &:nth-child(7) {
                    -webkit-transition-delay: .6s;
                    transition-delay: .6s
                  }
                  
                  &:nth-child(8) {
                    -webkit-transition-delay: .7s;
                    transition-delay: .7s
                  }
               }
            }
         }
      }
   }
    
    section {
      &.menu {
        position: fixed;
        z-index: 10;
        top: 0;
        bottom: 0;
        min-height: 100%;
       
        nav {
          padding-top: 4rem;
          -webkit-perspective: 20rem;
          perspective: 20rem;
           a {
             display: block;
             
             width: 12rem;
                          
             padding: 1.25rem 0rem 1.25rem 1.75rem;
             background: #222;
             border-bottom: 1px solid #2a2a2a;
             box-shadow: 2px 2px 2px rgba(0,0,0,.15), inset 2px 0 0 #fff;
             
             color: #fff;
             letter-spacing: 1.5px;
             font-weight: 300;
             font-size: 1.25rem;
             text-decoration: none;
             
             -webkit-transform: translate3d(-100%, 0, 0)
               rotateY(90deg);
             transform: translate3d(-100%, 0, 0)
               rotateY(90deg);
             
             -webkit-transform-origin: 0% 50%;
             transform-origin: 0% 50%;
             
             -webkit-transform-style: preserve-3d;
             transform-style: preserve-3d;
             
             -webkit-transition: all .25s ease-in-out;
             transition: all .25s ease-in-out;
             
            &:nth-child(1) {
              -webkit-transition-delay: .235s;
              transition-delay: .235s;
            }

            &:nth-child(2) {
              -webkit-transition-delay: .2s;
              transition-delay: .2s;
            }

            &:nth-child(3) {
              -webkit-transition-delay: .165s;
              transition-delay: .165s;
            }

            &:nth-child(4) {
              -webkit-transition-delay: .13s;
              transition-delay: .13s;
            }

            &:nth-child(5) {
              -webkit-transition-delay: .095s;
              transition-delay: .095s;
            }

            &:nth-child(6) {
              -webkit-transition-delay: .06s;
              transition-delay: .06s;
            }

            &:nth-child(7) {
              -webkit-transition-delay: .25s;
              transition-delay: .025s;
            }
          }
        }
      }
      
      &.content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        min-height: 100%;;
        min-width: 100%;
        
        display: table;
        
        background: #e23d3d;
        
        label {
          position: fixed;
          z-index: 1000;
          padding: 1rem 1.5rem;
          
          background: #222;
          
          font-size: 2rem;
          line-height: 2rem;
          color: #fff;
          
          cursor: pointer;
          
        }
        
        h1 {
          display: table-cell;
          vertical-align: middle;
          
          text-align: center;
          font-size: 3rem;
          letter-spacing: 1px;
          color: #fff;
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.