Morphing Hamburger Navigation usando JavaScript y CSS clip-path

Vista prévia

Descripción

Una hamburguesa móvil amigable que transforma el botón de hamburguesa en un menú a pantalla completa usando JavaScript y CSS de transición, transformación y propiedades de clip-path.

Funcionamiento

Crear la navegación de hamburguesa.

<nav class="nav">

<ul>


<li>Home</li>


<li>Contact</li>


<li>About</li>


<li>Blog</li>

</ul>
</nav>

Crear un botón de hamburguesa para alternar la navegación.

<button class="nav-tgl" type="button" aria-label="toggle menu">

<span aria-hidden="true"></span>
</button>

Las reglas de CSS/CSS3 necesarias para la navegación & botón de hamburguesa.

.nav-tgl {

display: inline-block;

cursor: pointer;

position: fixed;

z-index: 100;

right: 30px;

top: 30px;

width: 70px;

height: 70px;

border: none;

border-radius: 50%;

padding: 0;

background: #fff;

box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.24);

line-height: 0.6;

text-align: center;
}

.nav-tgl > span {

display: inline-block;

position: relative;

height: 2px;

width: 34px;

border-radius: 1px;

background: #293335;

vertical-align: middle;
}

.nav-tgl > span:before, .nav-tgl > span:after {

display: inline-block;

position: absolute;

content: "";

height: 2px;

border-radius: 1px;

background: #293335;

transition: all 200ms;
}

.nav-tgl > span:before {

top: -11px;

left: 3px;

width: 28px;
}

.nav-tgl > span:after {

top: 11px;

left: 6px;

width: 22px;
}

.nav-tgl:focus {

outline: none;
}

.nav-tgl:hover > span:after, .nav-tgl:hover > span:before {

width: 34px;

left: 0;
}

.nav-tgl.toggled > span {

height: 0;
}

.nav-tgl.toggled > span:after, .nav-tgl.toggled > span:before {

top: 0px;

left: 0;

width: 34px;
}

.nav-tgl.toggled > span:after {

transform: rotate(-45deg);
}

.nav-tgl.toggled > span:before {

transform: rotate(45deg);
}

.nav:before {

display: block;

position: fixed;

top: 0;

left: 0;

content: '';

width: 100vw;

height: 100vh;

background: rgba(0, 0, 0, 0.8);

transition: all 500ms ease-in-out;

clip-path: circle(30px at calc(100% - 65px) 65px);

visibility: hidden;
}

.active.nav:before {

visibility: visible;

clip-path: circle(100%);
}

.nav ul {

display: none;
}

El principal JavaScript para habilitar la navegación de hamburguesa.

let toggled = false;
const nav = document.getElementsByClassName('nav')[0];
const btn = document.getElementsByClassName('nav-tgl')[0];
btn.onclick = function(evt) {

if (!toggled) {


toggled = true;


evt.target.classList.add('toggled');


nav.classList.add('active');

} else {


toggled = false;


evt.target.classList.remove('toggled');


nav.classList.remove('active');

}
}