Navegación de cajón dinámica en JavaScript puro-Drawer. js
| Autor: | mdt2 |
|---|---|
| Views Total: | 1,270 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 22, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Drawer. js es un pequeño plugin de JavaScript para generar dinámicamente un estilo de cajón < a href = "https://wikicss.com/tag/off-canvas-menu/" > OFF-Canvas Navigation menú de una matriz de menú de objetos JS. No se requiere 3ª biblioteca de JavaScript.
Funcionamiento
Importa el de JavaScript Drawer. js y la hoja de estilo Drawer. CSS en la página HTML.
<link href="drawer.css" rel="stylesheet"> <script src="drawer.js"></script>
Cree un elemento de marcador de posición para la navegación del cajón.
<div id="drawer-holder"></div>
Cree una matriz de objetos para la navegación del cajón.
var myNav = [{
content: 'Home',
href: 'example.com'
},
{
content: 'Blog',
href: 'example.com'
},
{
content: 'Contact',
href: 'example.com'
},
{
content: 'About',
href: 'example.com'
}
] Inicializar la navegación del cajón y listo.
new Drawer().addListItems(myNav)
Aplique la configuración a la navegación del cajón.
new Drawer()
.setWidth(300)
.addListItems(myNav)
.setFontSize(18)
.setListItemColor('red')
.setDrawerBackgroundColor('white')
.setHamMenuBackgroundColor('white')
.setHamMenuBackgroundColorActive('red')
