5 variaciones de navegación de hamburguesa fuera de lienzo

Vista prévia

Descripción

Un proyecto contiene 5 variaciones de navegación de hamburguesa fuera de lienzo desde las que puede elegir traer la experiencia de navegación de aplicaciones nativas a su página web.

What's included:

• variación 1: Empuje el contenido principal con un efecto de paralaje.
• variación 2: Reduce el contenido principal.
• variación 3: Reduce el contenido principal en un espacio 3D.
• variación 4: Empuje el contenido principal a la derecha.
• variación 5: Anima la navegación al alternar.

Funcionamiento

Cree el código HTML para la navegación & contenido principal.

<div class="page">

<!--navigation-->

<nav class="nav">


<!--close button-->


<div class="nav__close"></div>


<!--navigation list-->


<ul class="nav__list">



<!--navigation item-->



<li class="nav__item">




<!--navigation link--><a class="nav__link" href="#" title="Home">Home</a>



</li>



<!--navigation item-->



<li class="nav__item">




<!--navigation link--><a class="nav__link" href="#" title="About">About</a>



</li>



<!--navigation item-->



<li class="nav__item">




<!--navigation link--><a class="nav__link" href="#" title="Contact">Contact</a>



</li>


</ul>

</nav>

<!--content part-->

<div class="page__content">


<!--open navigation button-->


<div class="nav-open-btn">



<div class="nav-open-btn__bar"></div>



<div class="nav-open-btn__bar"></div>



<div class="nav-open-btn__bar"></div>


</div>


<!--content block-->


<div class="content">



Main Content Here


</div>

</div>
</div>

Los estilos primarios CSS/CSS3.

html,
body {

margin: 0;

padding: 0;

min-height: 100vh;

overflow-x: hidden;
}

.page,
.page__content {

position: relative;
}

.page {

min-height: 100vh;

-webkit-perspective: 1500px;





perspective: 1500px;

background-color: rgba(28, 28, 28, 0.5);
}

.page__content {

min-height: 100vh;

background-color: #fff;
}

/* navigation styles */
.nav {

position: fixed;

top: 0;

left: 0;

bottom: 0;

width: 300px;

padding: 30px;

box-sizing: border-box;

background-color: #1c1c1c;

box-shadow: 4px 0 5px 0 rgba(0, 0, 0, 0.14), 1px 0 10px 0 rgba(0, 0, 0, 0.12), 2px 0 4px -1px rgba(0, 0, 0, 0.3);

z-index: 500;
}

/* nav list styles */
.nav__list {

position: relative;

padding: 0;

margin: 45px 0 0 0;

list-style-type: none;
}

/* nav item styles */
.nav__item:not(:last-child) {

margin-bottom: 20px;
}

/* nav link styles */
.nav__link {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

display: inline-flex;

align-items: center;

color: #fff;

text-decoration: none;
}

.nav__link:hover {

color: #4caf50;
}

/* nav link icon styles */
.nav__link-icon {

position: relative;

top: -3px;

/* !!!use only with material design icons */

margin-right: 10px;

color: currentColor;
}

/* close icon styles */
.nav__close {

position: absolute;

top: 30px;

right: 30px;

width: 40px;

height: 25px;

cursor: pointer;

/* close icon elements */

/* hover effect */
}

.nav__close:before, .nav__close:after {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

display: block;

width: 4px;

height: 28px;

border-radius: 10px;

content: '';

-webkit-transform-origin: center center;





transform-origin: center center;

background-color: #fff;
}

.nav__close:before {

position: absolute;

top: 0;

left: 18px;

-webkit-transform: rotate(-45deg);





transform: rotate(-45deg);
}

.nav__close:after {

position: absolute;

top: 0;

right: 18px;

-webkit-transform: rotate(45deg);





transform: rotate(45deg);
}

.nav__close:hover:before, .nav__close:hover:after {

background-color: #4caf50;
}

/* nav open btn styles */
.nav-open-btn {

position: absolute;

top: 30px;

left: 30px;

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

width: 35px;

height: 25px;

overflow: hidden;

cursor: pointer;
}

.nav-open-btn.js-hidden {

transition-property: all;

transition-duration: 0s;

transition-timing-function: linear;

transition-delay: 0s;

opacity: 0;

visibility: hidden;
}

.nav-open-btn__bar {

width: 100%;

height: 5px;

background-color: #1c1c1c;

border-radius: 20px;
}

.nav-open-btn__bar:nth-child(1) {

position: absolute;

top: 0;

left: 0;
}

.nav-open-btn__bar:nth-child(2) {

position: absolute;

top: 10px;

left: 0;
}

.nav-open-btn__bar:nth-child(3) {

position: absolute;

top: 20px;

left: 0;
}

El CSS para las variaciones de navegación.

/* Demo #1: styles */
.nav--offcanvas-1 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: -300px;

/* opened styles */
}

.nav--offcanvas-1.js-opened {

left: 0;
}

.page__content--offcanvas-1 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: 0;

/* opened styles */
}

.page__content--offcanvas-1.js-opened {

transition-property: all;

transition-duration: 0.3s;

transition-timing-function: linear;

transition-delay: 0s;

left: 300px;
}

/* Demo #2: styles */
.nav--offcanvas-2 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: -300px;

/* opened styles */
}

.nav--offcanvas-2.js-opened {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: 0;
}

.page__content--offcanvas-2 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

-webkit-transform: scale(1) translateX(0);





transform: scale(1) translateX(0);
}

.page__content--offcanvas-2.js-opened {

-webkit-transform: scale(0.8) translateX(150px);





transform: scale(0.8) translateX(150px);
}

/* Demo #3: styles */
.nav--offcanvas-3 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: -300px;

/* opened styles */
}

.nav--offcanvas-3.js-opened {

left: 0;
}

.page__content--offcanvas-3 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

-webkit-transform: rotateY(0deg) translateX(0);





transform: rotateY(0deg) translateX(0);
}

.page__content--offcanvas-3.js-opened {

-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);





transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

/* Demo #4: styles */
.nav--offcanvas-4 {

transition-property: all;

transition-duration: 0s;

transition-timing-function: linear;

transition-delay: 0s;

max-height: 80%;

-webkit-transform: rotateY(-75deg) translateX(-50px);





transform: rotateY(-75deg) translateX(-50px);

-webkit-transform-origin: left center;





transform-origin: left center;

opacity: 0;

visibility: hidden;

/* opened styles */
}

.nav--offcanvas-4.js-opened {

max-height: 100%;

transition: opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;

transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s;

transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;

-webkit-transform: rotateY(0) translateX(0);





transform: rotateY(0) translateX(0);

-webkit-transform-origin: left center;





transform-origin: left center;

opacity: 1;

visibility: visible;
}

.page__content--offcanvas-4 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: 0;

/* opened styles */
}

.page__content--offcanvas-4.js-opened {

left: 300px;
}

/* Demo #5: styles */
.nav--offcanvas-5 {

width: 50%;

opacity: 0;

visibility: hidden;
}

.nav--offcanvas-5.js-opened {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

width: 300px;

opacity: 1;

visibility: visible;
}

.page__content--offcanvas-5 {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

left: 0;

/* opened styles */
}

.page__content--offcanvas-5.js-opened {

left: 300px;
}

El JavaScript necesario para habilitar la navegación.

// hide nav open btn when the nav is open, adding/removing open classes to nav and content
var navOpenBtn = document.querySelector('.nav-open-btn');
var navCloseBtn = document.querySelector('.nav__close');
var nav = document.querySelector('.nav');
var pageContent = document.querySelector('.page__content');
var navList = document.querySelector('.nav__list');
var page = document.querySelector('.page');

// open nav
navOpenBtn.addEventListener('click', function () {

navOpenBtn.classList.add('js-hidden');


nav.classList.add('js-opened');


pageContent.classList.add('js-opened');
});

// close nav
navCloseBtn.addEventListener('click', function () {

navOpenBtn.classList.remove('js-hidden');


nav.classList.remove('js-opened');


pageContent.classList.remove('js-opened');
});

// close navigation if click outside it
page.addEventListener('click', function (e) {


var evTarget = e.target;


if (evTarget !== nav && nav.classList.contains('js-opened') && evTarget !== navOpenBtn && evTarget.parentNode !== navOpenBtn) {


console.log(navOpenBtn.firstChild);



navOpenBtn.classList.remove('js-hidden');



nav.classList.remove('js-opened');



pageContent.classList.remove('js-opened');

}

});