Author: | aderaaij |
---|---|
Views Total: | 658 views |
Official Page: | Go to website |
Last Update: | January 5, 2016 |
License: | MIT |
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();