Navegación deslizante inclinada con CSS clip path

Vista prévia

Descripción

Una navegación de cajón deslizante inclinada (menú fuera de lienzo) con un botón de hamburguesa animado, construido usando JavaScript, animaciones CSS3 y trazado de clip.

Funcionamiento

Codificar la navegación del cajón.

<div class="menu">

<p>Menu Item #1</p>

<p>Menu Item #2</p>

<p>Menu Item #3</p>
</div>
<div class="menu__toggler">

<span></span>
</div>

Estilo & animar el botón de hamburguesa.

.menu__toggler {

position: absolute;

top: 20px;

left: 20px;

z-index: 999;

height: 28px;

width: 28px;

outline: none;

cursor: pointer;

display: flex;

align-items: center;
}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {

position: absolute;

content: '';

width: 28px;

height: 2.5px;

background: #fafafa;

border-radius: 20px;

transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {

top: -8px;
}
.menu__toggler span::after {

top: 8px;
}
.menu__toggler.active > span {

background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {

background: #005c9c;

top: 0px;
}
.menu__toggler.active > span::before {

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





transform: rotate(-225deg);
}
.menu__toggler.active > span::after {

-webkit-transform: rotate(225deg);





transform: rotate(225deg);
}

El principal CSS/CSS3 para la navegación del cajón.

.menu {

position: absolute;

left: -30%;

z-index: 998;

color: #005c9c;

background: rgba(250, 250, 250, 0.7);

-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);





clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);

width: 30%;

height: 100%;

padding: 100px;

display: flex;

flex-direction: column;

justify-content: center;

transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}

@media only screen and (max-width: 600px) {

.menu {


width: 250px;


left: -250px;


padding: 50px;

}
}

.menu.active {

left: 0;
}

.menu p {

font-size: 1.4rem;

margin-bottom: 1rem;
}

JavaScript se utiliza sólo para alternar las clases CSS al abrir/cerrar la navegación del cajón.

const toggler = document.querySelector('.menu__toggler');
const menu = document.querySelector('.menu');

toggler.addEventListener('click', () => {

toggler.classList.toggle('active');

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