Fullscreen Flipping Navigation Menu with JavaScript and CSS3

Preview:

Description:

Just Another fullscreen navigation system that uses JavaScript and several CSS3 properties to create a stylish, full window menu with a flipping effect when toggled.

How to use it:

Create a site header with a menu toggle button.

<div class="siteHeader">
  <div class="siteHeader__navToggleWrap">
    <div class="siteNavToggle">
      <div class="siteNavToggle__bar"></div>
    </div>
  </div>
</div>

Create the fullscreen navigation menu for your website.

<nav class="siteMenu">
  <div class="siteMenu__inner">
    <div class="siteMenu__text">Menu Item Here</div>
  </div>
</nav>

Style the site header & menu toggle button.

.siteHeader {
  width: 100%;
  background-color: #fff;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 1.25em;
  border-bottom: 1px solid #999;
  position: relative;
  z-index: 500;
}
.siteNavToggle {
  position: relative;
  width: 2.5em;
  height: 1.3125em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.siteNavToggle::before, .siteNavToggle::after {
  content: '';
  height: 3px;
  width: 100%;
  background-color: #000;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}
.siteNavToggle__bar {
  width: 100%;
  height: 3px;
  background-color: #000;
  display: block;
  -webkit-transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition: opacity 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
}
.siteNavToggle.is-active {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.siteNavToggle.is-active .siteNavToggle__bar {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.siteNavToggle.is-active::before, .siteNavToggle.is-active::after {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  margin-top: -1px;
}
.siteNavToggle.is-active::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
}
.siteNavToggle.is-active::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 50%;
}
.siteNavToggle:hover .siteMenu__inner { will-change: transform; }

The core CSS styles for the fullscreen navigation.

.siteMenu {
  width: 100%;
  height: calc(100vh - 60px);
  -webkit-perspective: 1000px;
  perspective: 1000px;
  background-color: transparent;
}
.siteMenu__inner {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #222;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 4em;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.siteMenu__text {
  font-size: 3.25em;
  text-transform: uppercase;
  color: #444;
  text-align: center;
  line-height: 1.25;
  max-width: 90%;
  margin: 0 auto;
  letter-spacing: 1px;
}
.is-activeMenu .siteMenu__inner {
  -webkit-transform: rotateX(0deg) scale(1);
  transform: rotateX(0deg) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

The core JavaScript to active the fullscreen navigation.

var NavToggle = function() {
  var
    navToggle,
    body;
  var _init = function() {
    navToggle = document.querySelector('.siteHeader__navToggleWrap');
    body      = document.querySelector('body');
    _addEventHandlers();
  }
  var _addEventHandlers = function() {
    navToggle.addEventListener('click', _toggleNav, false)
  }
  var _toggleNav = function() {
    if(!body.classList.contains('is-activeMenu')) {
      body.classList.add('is-activeMenu');
      this.children[0].classList.add('is-active');
    } else {
      var that = this;
      setTimeout(function(){
        body.classList.remove('is-activeMenu');
        that.children[0].classList.remove('is-active');
      }, 150);
    }
  }
  return {
    init: _init
  }
}();
NavToggle.init();