Navegación de cajón como aplicación móvil con JavaScript puro-SidebarJS

Vista prévia

Descripción

SidebarJS es una biblioteca de JavaScript independiente que se utiliza para crear una navegación fuera de lienzo como se ve en las aplicaciones móviles.

Instalación

# NPM
$ npm install sidebarjs --save

Funcionamiento

Importa el archivo JavaScript Sidebar. js en tu documento HTML.

<script src="sidebar.js"></script>

La estructura HTML para la navegación del cajón.

<aside class="js-sidebar">

<div class="js-sidebar--container">


<h3 class="sidebar--title">Drawer Navigation</h3>


<nav class="sidebar--menu">



<div class="sidebar--menu-link--group">




<a class="sidebar--menu-link" href="#!">Item 1</a>




<a class="sidebar--menu-link" href="#!">Item 2</a>




<a class="sidebar--menu-link" href="#!">Item 3</a>



</div>



<div class="sidebar--menu-link--group">




<a class="sidebar--menu-link" href="#!">Item 4</a>




<a class="sidebar--menu-link" href="#!">Item 5</a>




<a class="sidebar--menu-link" href="#!">Item 6</a>




<a class="sidebar--menu-link" href="#!">Item 7</a>




<a class="sidebar--menu-link" href="#!">Item 8</a>



</div>


</nav>

</div>

<div class="js-sidebar--background"></div>
</aside>

Cree un elemento para alternar la navegación del cajón.

<div class="js-sidebar--open">Toggle</div>

Estilo de la navegación del cajón con los siguientes fragmentos de código CSS.

.js-sidebar, .js-sidebar--background {

top: 0;

left: 0;

width: 100%;

height: 100%;
}

.js-sidebar--background {

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;
}

.js-sidebar--open {

height: 44px;

color: #FFF;

background: #2196F3;

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

display: -webkit-flex;

-webkit-align-items: center;

-webkit-justify-content: center;

display: flex;

align-items: center;

justify-content: center;
}

.js-sidebar {

position: fixed;

z-index: 9999;

-moz-transform: translate(-100%, 0);

-ms-transform: translate(-100%, 0);

-webkit-transform: translate(-100%, 0);

transform: translate(-100%, 0);

-moz-transition: -moz-transform 0s ease 0.3s;

-o-transition: -o-transform 0s ease 0.3s;

-webkit-transition: -webkit-transform 0s ease;

-webkit-transition-delay: 0.3s;

transition: transform 0s ease 0.3s;
}

.js-sidebar--background {

position: absolute;

background: transparent;
}

.js-sidebar--container {

position: relative;

z-index: 1;

width: 90%;

max-width: 300px;

height: 100%;

background: #FFF;

display: -webkit-flex;

-webkit-flex-direction: column;

display: flex;

flex-direction: column;

-moz-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);

box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1);

-moz-transform: translate(-100%, 0);

-ms-transform: translate(-100%, 0);

-webkit-transform: translate(-100%, 0);

transform: translate(-100%, 0);
}

.js-sidebar--container .sidebar--title {

height: 150px;

min-height: 150px;

padding: 16px;

background: #2196F3;

color: white;

font-size: 32px;

line-height: 100%;

display: -webkit-flex;

-webkit-align-items: flex-end;

display: flex;

align-items: flex-end;
}

.js-sidebar--container .sidebar--menu { overflow: auto; }

.js-sidebar--container .sidebar--menu-link--group {

border-top: 1px solid rgba(0, 0, 0, 0.1);

display: -webkit-flex;

-webkit-flex-direction: column;

display: flex;

flex-direction: column;
}

.js-sidebar--container .sidebar--menu-link { padding: 16px; }

.js-sidebar.is-visible {

-moz-transform: translate(0, 0);

-ms-transform: translate(0, 0);

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

-moz-transition: -moz-transform 0s ease 0s;

-o-transition: -o-transform 0s ease 0s;

-webkit-transition: -webkit-transform 0s ease;

-webkit-transition-delay: 0s;

transition: transform 0s ease 0s;
}

.js-sidebar.is-visible .js-sidebar--background { background: rgba(0, 0, 0, 0.2); }

Cree una nueva instancia de SidebarJS () y done.

var sidebarjs = new SidebarJS();

Opciones posibles con valores predeterminados.

// Sidebar DOM element
component?: <HTMLElement>sidebarjs,

// Minimum swipe in px required to trigger listener: open
documentMinSwipeX?: 10,

// Range in px where document is listening for gesture: open
documentSwipeRange?: 40,

// Open and close sidebar with swipe gestures
nativeSwipe?: true,

// Enable/Disable open on swipe
nativeSwipeOpen?: true,

// Sidebar position, accepted values: left|right
position?: 'left',

// Backdrop opacity on sidebar open
backdropOpacity?: 0.3,

// Show sidebar on screen > 1024px
responsive?: false,

// Page content if sidebar has option responsive
mainContent?: <HTMLElement>

// Function called after sidebar is open
onOpen?: () => void,

// Function called after sidebar is close
onClose?: () => void,

// Function called when sidebar change visibility
onChangeVisibility?: (changes: { isVisible: boolean }) => void,

Registro de cambios

v6.0.0 (03/30/2018)

• refactorizar (compilar): mover los scripts de NPM al archivo de nodo específico, cambiar la carpeta Dist a la carpeta lib
• refactorizar (NPM): Release script
• docs: README actualizado
• Build: refactorizar sistema de compilación
• Chore (demo): actualizar ruta de acceso lib

v5.4.0 (12/02/2018)

• añadido una función simple para activar o desactivar el Swype mientras se ejecuta

v5.3.0 (09/04/2018)

• actualizar

v5.2.1 (05/31/2018)

• Correcciones de errores y mejoras de rendimiento

v5.2.0 (05/31/2018)

• SidebarElement: opción adaptable