Off Canvas Navigation

index.html

<nav id="nav" class="nav">
  <ul id="nav-list" class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<button id="menu-button" class="hamburger">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</button>
<main id="main" class="main">
  <h1>Off Canvas Navigation</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque quos sed in, repudiandae libero ut possimus ab tenetur magni!</p>
  <p>Dignissimos dolores provident distinctio nobis, nam perferendis perspiciatis obcaecati impedit, sunt, fugiat rerum pariatur recusandae quos corporis aspernatur officia porro.</p>
  <p>Facere, placeat incidunt esse libero at necessitatibus, illo minus aliquid alias nemo asperiores autem rem, quisquam quasi obcaecati ad molestiae.</p>
  <p>Rerum, ea amet delectus voluptate natus accusantium nam possimus unde, iste et nulla voluptatibus quaerat, facilis obcaecati officiis qui quae.</p>
<footer>
  <a href="https://github.com/cojdev">Github</a>
</footer>
</main>

off-canvas-navigation.markdown

Off Canvas Navigation

A Pen by Charles Ojukwu on CodePen.

License.

script.js

(function(){
  
  'use strict';
  
  function $ (query) {
    return document.querySelector(query);
  }
  
  function init() {
    $('#menu-button').addEventListener('click', openMenu);
  }
  
  function stagger (elem,i) {
    setTimeout(function(){
      elem.classList.toggle('a-show');
      console.log(elem.classList);
    },200+100*i);
  }
  
  function openMenu () {
    $('#main').classList.toggle('main-open');
    // $('#nav').classList.toggle('.nav-open');
    $('#menu-button').classList.toggle('cross');
    var navItems = $('#nav-list').getElementsByTagName('li');
    console.log(navItems);
    for (var i = 0; i < navItems.length; i++) {
      var temp = navItems[i];
      stagger(temp,i);
    }
  }
  
  document.addEventListener('DOMContentLoaded', init);
  
})();

style.scss

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

html {
  font: 16px/1.5 'Nunito Sans', sans-serif;
  color: #444;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 3rem;
  font-weight: 200;
  position: relative;
  margin-top: 0;
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 100%;
    height: 2px;
    width: 150px;
    background: #e14;
  }
}

p {
  max-width: 80ch;
}

.nav {
  position: fixed;
  z-index: 1;
  background-image: linear-gradient(135deg, #248, #213);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.nav-list {
  position: absolute;
  right: 0;
  text-align: right;
  list-style: none;
  padding: 4rem 1rem;
  margin: 0;
  width: 200px;
  
  
  a {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    text-decoration: none;
    color: #fff;
    letter-spacing: .1ch;
    padding: .25em 0;
    position: relative;
    &:after {
      display: block;
      position: absolute;
      content: '';
      height: 4px;
      width: 100%;
      background: #000;
      opacity: .15;
      transform: scaleX(0);
      transform-origin: 100% 50%;
      transition: 300ms ease;
    }
    &:hover:after {
      transform: scaleX(1);
    }
  }
  
  li {
    padding: 0;
    margin: 0;
    display: block;
    transform: translateX(50%);
    transition: 300ms ease-out;
    opacity: 0;
  }
}

li.a-show {
  transform: translateX(0);
  opacity: 1;
}

.main {
  position: relative;
  z-index: 2;
  background-color: #f8f8f8;
  background-image: repeating-linear-gradient(to right, transparent, transparent 199px, #eee 199px, #eee 200px);
  padding: 3rem;
  min-height: 100vh;
  //overflow: auto;
  transition: 500ms ease;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  
  &-open {
    transform: translateX(-200px) scale(.95);
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: .75;
    border-radius: 8px;
  }
}

.hamburger {
  position: fixed;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  display: inline-block;
  border: none;
  height: 2rem;
  width: 2rem;
  outline: none;
  background-color: transparent;
}

.cross {
  .line {
    background-color: #fff;
    &:first-child {
      transform: rotate(135deg);
    }

    &:nth-child(2) {
      transform: scaleX(0);
      opacity: 0;
    }

    &:last-child {
      transform: rotate(-135deg);
    }
  }
}

.line {
  $weight: 2px;
  height: $weight;
  width: 100%;
  border-radius: $weight / 2;
  background: #000;
  position: absolute;
  left: 0;
  transition: 300ms ease;
  top: calc(50% - #{$weight} / 2);
  
  &:first-child {
    transform: translateY(-8px);
  }
  
  &:last-child {
    transform: translateY(8px);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet" />