Menú de navegación de volteo a pantalla completa con JavaScript y CSS3

Vista prévia

Descripción

Sólo otro sistema de navegación a pantalla completa que utiliza JavaScript y varias propiedades CSS3 para crear un menú de ventana elegante y completo con un efecto de voltear al alternar.

Funcionamiento

Cree un encabezado de sitio con un botón de alternancia de menú.

<div class="siteHeader">

<div class="siteHeader__navToggleWrap">


<div class="siteNavToggle">



<div class="siteNavToggle__bar"></div>


</div>

</div>
</div>

Cree el menú de navegación a pantalla completa para su sitio Web.

<nav class="siteMenu">

<div class="siteMenu__inner">


<div class="siteMenu__text">Menu Item Here</div>

</div>
</nav>

Estilo el encabezado del sitio & botón de alternancia de menú.

.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; }

Los estilos CSS principales para la navegación a pantalla completa.

.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;
}

El núcleo JavaScript para activar la navegación a pantalla completa.

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();