Barra lateral elástica de navegación con CSS3 y JavaScript

Vista prévia

Descripción

Un menú de navegación fuera de lienzo de la barra lateral de lujo que aparece con un efecto de animación elástica basado en CSS3 y un poco de JavaScript.

Funcionamiento

Cree la navegación de barra lateral.

<div id="nav" class="navigation">

<div class="navigation__inner">


<!-- Navigation Content Here -->

</div>
</div>

Cree un botón de desencadenador para abrir/cerrar la navegación de la barra lateral.

<button id="show">Toggle Menu</button>

Los estilos primarios CSS/CSS3.

.navigation {

position: fixed;

width: 300px;

height: 100%;

top: 0;

overflow-y: auto;

overflow-x: hidden;

opacity: 0;

visibility: hidden;

z-index: 99;

-webkit-transition-delay: 300ms;

transition-delay: 300ms;

left: 0;
}

.navigation.active {

opacity: 1;

visibility: visible;

-webkit-transition-delay: 0s;

transition-delay: 0s;
}

.navigation.active .navigation__inner {

background-color: #7c7fe0;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

-webkit-transition: background-color 0s linear 599ms, -webkit-transform 300ms linear;

transition: background-color 0s linear 599ms, -webkit-transform 300ms linear;

transition: transform 300ms linear, background-color 0s linear 599ms;

transition: transform 300ms linear, background-color 0s linear 599ms, -webkit-transform 300ms linear;
}

.navigation.active .navigation__inner:after {

width: 300%;

border-radius: 50%;

-webkit-animation: elastic 150ms ease 300.5ms both;

animation: elastic 150ms ease 300.5ms both;
}

.navigation__inner {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

overflow: hidden;

z-index: 999999;

-webkit-transform: translate(-100%, 0);

transform: translate(-100%, 0);

-webkit-transition: background-color 0s linear 300ms, -webkit-transform 300ms linear;

transition: background-color 0s linear 300ms, -webkit-transform 300ms linear;

transition: transform 300ms linear, background-color 0s linear 300ms;

transition: transform 300ms linear, background-color 0s linear 300ms, -webkit-transform 300ms linear;
}

.navigation__inner:after {

content: '';

position: absolute;

width: 0;

height: 100%;

top: 0;

right: 0;

background-color: #7c7fe0;

border-radius: 50%;

z-index: -1;

-webkit-transition: all 300ms linear;

transition: all 300ms linear;
}

Cree el efecto elástico en los fotogramas clave de CSS3.

@-webkit-keyframes
 elastic {
0% {
 border-radius: 50%;
}
 45% {
 border-radius: 0;
}
 65% {
 border-top-right-radius: 40px 50%;
 border-bottom-right-radius: 40px 50%;
}
 80% {
 border-radius: 0;
}
 90% {
 border-top-right-radius: 20px 50%;
 border-bottom-right-radius: 20px 50%;
}
 100% {
 border-radius: 0;
}
}

@keyframes
 elastic {
0% {
 border-radius: 50%;
}
 45% {
 border-radius: 0;
}
 65% {
 border-top-right-radius: 40px 50%;
 border-bottom-right-radius: 40px 50%;
}
 80% {
 border-radius: 0;
}
 90% {
 border-top-right-radius: 20px 50%;
 border-bottom-right-radius: 20px 50%;
}
 100% {
 border-radius: 0;
}
}

Utilice JavaScript sin formato para alternar las clases CSS en función del estado actual.

var btn = document.getElementById('show');
var nav = document.getElementById('nav');

btn.addEventListener('click', function() {


nav.classList.toggle('active');
});