Morphing hamburguesa móvil de navegación con JavaScript y CSS3

Vista prévia

Descripción

Sin embargo, otro concepto de navegación móvil morphing que expande el botón de alternar hamburguesa a un menú de navegación a pantalla completa al alternar. Escrito en JavaScript puro y HTML/CSS.

Funcionamiento

El proyecto utiliza < a href = "https://material.io/icons/" target = "_ blank" rel = "noopener" > los iconos de material para los iconos de hamburguesa y cierre.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Cree el conmutador de navegación & botones de cierre.

<i id="burger" class="material-icons" onclick="burger()">menu</i>
<i id="quit" class="material-icons" onclick="quit()">clear</i>

Cree el menú de navegación.

<div id="links">

<a href="">Home</a>

<a href="">About</a>

<a href="">Contact</a>
</div>

Estilo y posición de la palanca & cerrar botones.

#burger{

position: fixed;

right: 0;

top: 0;

color: white;

background: linear-gradient(45deg, #9682C8 10%, #05BCC9);;

font-size: 32px;

padding: 16px 16px 32px 32px;

border-radius: 0% 0% 0% 100%;

transition: 1s;

cursor: pointer;
}

#quit{

position: fixed;

top: 0;

color: white;

font-size: 32px;

padding: 16px;

display: none;

cursor: pointer;
}

Estilo del menú de navegación.

#links{

display: none;

flex-direction: column;

width: 100vw;

height: 50vh;

padding: 25vh 0;

justify-content: space-around;
}

#links a{

text-align: center;

text-decoration: none;

color: white;

font-size: 2em;

font-family: 'Roboto';

z-index: 10;
}

El JavaScript alterna los estilos CSS cuando se abre y se cierra la navegación.

function burger(){

var burger = document.getElementById('burger');

var links = document.getElementById('links');

var quit = document.getElementById('quit');

burger.style.padding = '16px 16px 200vw 200vw';

links.style.display = 'flex';

quit.style.display = 'inline';
}

function quit(){

var burger = document.getElementById('burger');

var links = document.getElementById('links');

var quit = document.getElementById('quit');

burger.style.padding = '16px 16px 32px 32px';

links.style.display = 'none';

quit.style.display = 'none';
}