Simple flexible de navegación lateral OFF-Canvas con Pure JavaScript-mkgSideBar
| Autor: | mkg0 |
|---|---|
| Views Total: | 3,183 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 16, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
mkgSideBar es una biblioteca nativa de JavaScript que le ayuda a crear paneles de navegación de barra lateral suaves y dinámicos, flexibles y móviles para su proyecto web multiplataforma. Soporta niveles de menú ilimitados.
¿Cómo funciona?
Instalación:
# NPM $ npm install mkg-sidebar --save
Agregue referencias a la mkgSideBar. js y mkgSideBar. CSS a la página HTML.
<script src="dist/mkgSideBar.js"></script> <link rel="stylesheet" href="dist/mkgSideBar.css">
Cree la navegación del sitio de barra lateral.
<div id="menu"> ... </div>
Agregue los elementos de menú anidados como una matriz de JavaScript en la navegación.
var items = [
{
text:'Menu 1',
link:'#'
},
{
text:'Menu 2',
link:'#',
items:[
{
text:'Menu 2-1',
link:'#',
items:[
{
text:'Menu 2-1-1',
link:'#'
}
]
},
{
text:'Menu 2-2',
link:'#'
}
]
},
{
text:'Menu 3',
link:'#',
follow:false // no-follow
}
] Activa la barra lateral de navegación que se deslizará hacia fuera desde el lado izquierdo de la pantalla.
new mkgSideBar('menu',items,{position:'left'}) Abra la barra lateral de navegación manualmente.
mkgSideBar.menu.open();
Opciones de configuración predeterminadas.
new mkgSideBar('menu',items,{
baseURL: '',
position: 'left', // left, top, bottom, right
closeButton: true,
closeOnBackgroundClick: true,
animationType: 'slide',
defaultTitle:'' //default title attr value
defaultFollow:true, // default follow attr value
autoCollapse:false
onOpen: null, // callback
onClose: null // callback
}) Métodos de la API:
menu.collapse(); //collapse all submenus
menu.unCollapse(); //uncollapse all submenus
menu.open(); //open menu
menu.close(); //close menu
menu.toggle(); //toggle menu
menu.removeItems(); //clears all items
menu.setContentFrom('#divWithContent'); //sets the menu content from targeted element
menu.setHeaderFrom('#divWithContent'); //sets the menu header content from targeted element
menu.setFooterFrom('#divWithContent'); //sets the menu footer content from targeted element
menu.setContent('<div>test</div>'); //sets the menu content from targeted element
menu.setHeader('<div>test</div>'); //sets the menu header content from targeted element
menu.setFooter('<div>test</div>'); //sets the menu footer content from targeted element
menu.refreshItems(); Registro de cambios
08/16/2018
- Reestructurar
