<header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">Control panel</a></li>
      <li class="menu__item"><a href="" class="menu__link">Manual assistance</a></li>
      <li class="menu__item">
        <a href="#" target="_blank" class="menu__link menu__link--social">Automatic management</a>
      </li>
      <li class="menu__item">
        <a href="#" target="_blank" class="menu__link menu__link--social">
          Exit</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1>
  <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2>
  <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p>
</main>
$primary-color: #f4f5f6;

@mixin easeOut {
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1)
}

@mixin tablet {
  @media screen and (max-width: 768px) {
    @content;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: $primary-color;
  font-family: 'Open Sans';
  color: #29363B; /*white; */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.header {
  position: fixed;
  z-index: 5;
  width: 100%;
}

.burger {
  position: absolute;
  z-index: 10;
  right: 25px;
  top: 25px;
  cursor: pointer;
  transform: rotateY(0);
  @include easeOut;
  
  &__patty {
    width: 28px;
    height: 2px;
    margin: 0 0 4px 0;
    background: #29363B; /*white; */
    @include easeOut;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  // transform burger into 'x'
  &--close {
    transform: rotate(180deg);
    
    .burger__patty {
      &:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -4px);
      }
    }
  }
}

.menu {
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
  
  &--active {
    visibility: visible;
  }
  
  &__brand,
  &__list {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  &__list {
    margin: 0;
    padding: 0;
    background: #375b74; /*mix(black, $primary-color, 20); */
    list-style-type: none;
    transform: translate3d(0, -100%, 0);
    @include easeOut;
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__brand {
    background: $primary-color;
    @include easeOut;
    transform: translate3d(0, 100%, 0);
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__item {
    transform: translate3d(500px, 0, 0);
    @include easeOut;
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__link {
    display: inline-block;
    position: relative;
    font-size: 30px;
    padding: 15px 0;
    font-weight: 700;
    color: white;
    text-decoration: none;
    color: white;
    @include easeOut;
    
    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 10px;
      height: 2px;
      background: white;
      transform: translateX(-50%);
      @include easeOut;
    }
    
    &:hover {
      &:before {
        width: 100%;
      }
    }
  }
  
  // add delay to each menu item
  @for $x from 1 through 6 {
    .menu__item:nth-child(#{$x}) {
      transition-delay: $x * .1s;
    }
  }
}

// responsive tablet view
@include tablet {
 ul.menu__list,
 div.menu__brand {
  float: none;
  width: 100%;
  min-height: 0;

   &--active {
     transform: translate3d(0, 0, 0);
   }
 }

 .menu__list {
   height: 75vh;
   transform: translate3d(-100%, 0, 0);
 }

 .menu__link {
   font-size: 24px;
 }

 .menu__brand {
   height: 25vh;
   transform: translate3d(100%, 0, 0);

   .logo {
     width: 90px;
     height: 90px;
   }
 }
}

// make the demo look nice, not required for your own use.
.logo {
  width: 200px;
  height: 200px;
  background: lighten(black, 10);
  border-radius: 50%;
}

h1, h2, h3, p {
  margin: 0;
  font-weight: 400;
}

main {
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  padding: 8vw;
  
  h1 > a {
    color: #29363B; /* white; */
    text-decoration: none;
    font-size: 48px;
    font-weight: 500;
  }
}

.support {
  position: fixed;
  bottom: 24px;
  color: rgba(black, 0.6);
}
View Compiled
(function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');

    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');

        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');

        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.