Navegación lateral estilo Android en JavaScript puro

Vista prévia

Descripción

Un ligero JavaScript & basado en CSS de navegación lateral que permite alternar una navegación fuera de lienzo de estilo Android haciendo clic en el icono de alternar o deslizar la pantalla hacia la derecha/izquierda en los dispositivos táctiles.

Funcionamiento

Cargue el < a href = "https://design.google.com/icons/" target = "_ blank" > los iconos de material en el documento HTML.

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

Cree un botón para alternar la navegación fuera del lienzo.

<div class="header">

<button class="js-menu-show header__menu-toggle material-icons">menu</button>
</div>

La estructura HTML principal para la navegación fuera del lienzo.

<aside class="js-side-nav side-nav">

<nav class="js-side-nav__container side-nav__container">


<button class="js-menu-hide side-nav__hide material-icons">close</button>


<header class="side-nav__header">



Side Nav


</header>


<ul class="side-nav__content">



<li>Link 1</li>



<li>Link 2</li>



<li>Link 3</li>



<li>Link 4</li>


</ul>

</nav>
</aside>

Cargue el archivo de JavaScript principal Side-NAV. js en la parte inferior del documento.

<script src="js/side-nav.js"></script>

Comencemos a estilo de la navegación lateral. Modifique o reemplace los siguientes fragmentos de código CSS para crear sus propios estilos.

.header {

width: 100%;

height: 56px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

background: #333;

color: #FFF;

display: flex;

flex-direction: row;

align-items: center;

padding: 0 16px;
}

.header__menu-toggle {

background: none;

border: none;

width: 24px;

height: 24px;

padding: 0;

margin: 0;

color: #FFF;
}

.side-nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

pointer-events: none;
}

.side-nav--visible { pointer-events: auto; }

.side-nav::before {

content: '';

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

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

opacity: 0;

transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
}

.side-nav__container {

position: relative;

width: 90%;

max-width: 400px;

background: #FFF;

height: 100%;

box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);

transform: translateX(-102%);

display: flex;

flex-direction: column;
}

.side-nav--visible .side-nav__container { transition: transform 0.13s cubic-bezier(0, 0, 0.3, 1); }

.side-nav--visible .side-nav--animatable .side-nav__container { transition: transform 0.33s cubic-bezier(0, 0, 0.3, 1); }

.side-nav--visible::before { opacity: 1; }

.side-nav--visible .side-nav__container { transform: none; }

.side-nav__hide {

position: absolute;

left: 16px;

top: 16px;

background: none;

border: none;

color: #FFF;
}

.side-nav__header {

height: 200px;

background: #330099;

color: #FFF;

display: flex;

padding: 16px;

align-items: flex-end;
}

.side-nav__content {

flex: 1;

list-style: none;

padding: 0;

margin: 0;

overflow-x: hidden;

overflow-y: auto;

-webkit-overflow-scrolling: touch;
}

.side-nav__content li {

height: 32px;

line-height: 32px;

padding: 0 16px;
}

.side-nav__content li:hover { background: #CCC; }