La navegación lateral de Android-like con Pure JavaScript-Sidenav. js

Vista prévia

Descripción

Sidenav. js es una implementación de JavaScript/CSS pura de la navegación del sitio de la barra lateral como se ve en las aplicaciones de Android.

Funcionamiento

Cree un elemento DIV para la superposición de pantalla completa cuando la navegación de la barra lateral esté abierta.

<div id="backdrop"></div>

Cree la navegación de barra lateral.

<div id="sidenav">Hi sidenav</div>

Agregue un botón de alternancia de menú al contenido principal.

<div id="content">

<button id="menu-toggle">Click to open</button>
</div>

Estilo de la barra lateral de navegación.

.sn-backdrop {

background: #000;

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

display: none;

opacity: 0;

z-index: 50;

will-change: opacity;
}

.sn-visible .sn-backdrop { display: block }

.sn-sidenav {

position: fixed;

left: 0;

top: 0;

height: 100%;

z-index: 100;

overflow-y: auto;

will-change: transform;

box-shadow: 0 0 30px rgba(0,0,0,0.6);

background-color: #3498DB;

padding: 20px;

color: #fff;
}

.sn-content {

position: relative;

z-index: 10
}

.sn-visible, .sn-visible body, .sn-visible .sn-content { overflow: hidden }

Incluya el sidenav. min. js en la parte inferior de la Página Web.

<script src="dist/sidenav.min.js"></script>

Inicializar la navegación de barra lateral.

"use strict";

var sidenav = new Sidenav({

content: document.getElementById("content"),

sidenav: document.getElementById("sidenav"),

backdrop: document.getElementById("backdrop")
});

document.getElementById("menu-toggle").addEventListener("click", function() {

sidenav.open();
});