Navegación barra lateral animada con JavaScript y CSS

Vista prévia

Descripción

Un JavaScript & concepto de interacción de barra lateral basada en CSS para crear fácilmente una navegación lateral fuera de lienzo que puede ocultar/mostrar en función de las acciones del usuario.

Funcionamiento

Cree la navegación de barra lateral.

<div id="box">

<div id="items">


<div class="item">Item 1</div>


<div class="item">Item 2</div>


<div class="item">Item 3</div>


<div class="item">Item 4</div>


<div class="item">Item 5</div>

</div>
</div>

Crea un botón de hamburguesa para alternar la navegación de la barra lateral.

<div id="btn">

<div id="top"></div>

<div id="middle"></div>

<div id="bottom"></div>
</div>

Agregar contenido de la página a un contenedor denominado ' contenido principal '.

<div id="main-content">

Main Content goes here
</div>

El CSS principal para la navegación de barra lateral.

#main-content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;
}

#box {

position: fixed;

z-index: 4;

overflow: auto;

top: 0px;

left: -275px;

width: 275px;

opacity: 0;

padding: 20px 0px;

height: 100%;

background-color: #f6f6f6;

color: #343838;

-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#box.active {

left: 0px;

opacity: 1;
}

#items {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);
}

#items .item {

position: relative;

cursor: pointer;

font-size: 2em;

padding: 15px 30px;

-webkit-transition: all 250ms;

transition: all 250ms;
}

#items .item:hover {

padding: 15px 45px;

background-color: rgba(52, 56, 56, 0.2);
}

Estilo & animar el botón de hamburguesa.

#btn {

position: fixed;

z-index: 5;

top: 15px;

left: 15px;

cursor: pointer;

-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn div {

width: 35px;

height: 2px;

margin-bottom: 8px;

background-color: #00DFFC;

-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;

transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}

#btn:hover > div { box-shadow: 0 0 1px #00DFFC; }

#btn.active { left: 230px; }

#btn.active div { background-color: #343838; }

#btn.active:hover > div { box-shadow: 0 0 1px #343838; }

#btn.active #top {

-webkit-transform: translateY(10px) rotate(-135deg);

-ms-transform: translateY(10px) rotate(-135deg);

transform: translateY(10px) rotate(-135deg);
}

#btn.active #middle {

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);
}

#btn.active #bottom {

-webkit-transform: translateY(-10px) rotate(-45deg);

-ms-transform: translateY(-10px) rotate(-45deg);

transform: translateY(-10px) rotate(-45deg);
}

El JavaScript para habilitar la navegación de barra lateral.

var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');

sidebarBtn.addEventListener('click', function(event) {


if (this.classList.contains('active')) {



this.classList.remove('active');



sidebarBox.classList.remove('active');

} else {



this.classList.add('active');



sidebarBox.classList.add('active');

}
});

pageWrapper.addEventListener('click', function(event) {


if (sidebarBox.classList.contains('active')) {



sidebarBtn.classList.remove('active');



sidebarBox.classList.remove('active');

}
});

window.addEventListener('keydown', function(event) {


if (sidebarBox.classList.contains('active') && event.keyCode === 27) {



sidebarBtn.classList.remove('active');



sidebarBox.classList.remove('active');

}
});