Simple OFF-Canvas Push menu con Pure JavaScript-Slideout. js
| Autor: | Mango |
|---|---|
| Views Total: | 4,474 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 6, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Slideout. js es una biblioteca de JavaScript pura para crear un menú desplegable de barra lateral para móviles en sus aplicaciones Web.
La navegación fuera del lienzo utiliza transiciones CSS3 & transforma para deslizar el menú fuera del lienzo mientras empuja el área de contenido principal a la derecha.
Funcionamiento
Crear una navegación para el menú Push fuera del lienzo.
<nav id="menu" class="menu"> ... </nav>
Añada el contenido principal al contenedor ' Main '.
<main id="main" class="panel"> ... </main>
Cree un botón de alternancia para el menú de inserción fuera del lienzo.
<main id="main" class="panel"> ... <button class="js-slideout-toggle"> Open slideout </button> .... </main>
Cargue el Slideout. js en la parte inferior del documento.
<script src="dist/slideout.js"></script>
Habilite el menú fuera del lienzo & botón de alternancia.
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
slideout.toggle();
}); Los estilos CSS principales.
html,
body {
width: 100%;
height: 100%;
}
.slideout-menu {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
display: none;
}
.slideout-panel {
position: relative;
z-index: 1;
}
.slideout-open,
.slideout-open body { overflow: hidden; }
.slideout-open .slideout-menu { display: block; } Añade tus propios estilos al menú Push fuera del lienzo.
.slideout-menu {
...
}
.slideout-panel {
...
...
} Registro de cambios
12/06/2016
- Agregue mejoras CSS, actualice documentos y cambie el nombre de Option FX para facilitar
