El Splitter menu también conocido como menú hamburguesa es un componente de Onsen UI que permite tener un menú de navegación oculto y que se muestra al presionar un botón en la barra de navegación.
El splitter menú es un componente muy útil para aplicaciones que cuentan con muchas paginas y busca facilitar el acceso al usuario.
Les invito a ver los articulos Introduccion a Onsen UI y Plantillas y navegacion entre paginas con Onsen UI les ayudaran a comprender mejor este articulo.
Código
Parte 1
La primera parte del código, después de incluir las librerías onsen ui y jquery seria el navigator y el template del splitter menu.
<ons-navigator swipeable id="myNavigator"></ons-navigator>
<!-- Plantilla para el splitter menu, aqui se muestra el menu y en el espacio "content" se muestra la pagina que se selecciona por default=page1.html -->
<template id="splitter.html">
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page id="menu.html">
<ons-list>
<ons-list-item class="menux_item" data-href="page1.html" tappable>
Pagina 1
</ons-list-item>
<ons-list-item class="menux_item" data-href="page2.html" tappable>
Pagina 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="page1.html"></ons-splitter-content>
</ons-splitter>
</template>Aquí tenemos un template que contiene un componente ons-splitter que contiene la configuración del menu, la lista de opciones y el splitter content apunta a la pagina de inicio por default.
Parte 2
Lo siguiente seria la pagina 1 o page1.html.
<template id="page1.html">
<ons-page id="page1">
<ons-toolbar
<div class="left">
<ons-toolbar-button id="open_menu">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mi Aplicacion</div>
</ons-toolbar>
<ons-card >
<div class="title">Pagina 1</div>
<div class="content">
<p>Esta es la pagina 1</p>
<div>
</div>
</div>
</ons-card>
</ons-page>
</template>La pagina que debe tener un toolbar con un botón que servirá para abrir el menu. El ons-toolbar contiene el titulo de la aplicación y un botón con id=open_menu y un icono de menú, que servirá para abrir el menú.
Parte 3
Esta parte es otra pagina, ya que el menú de la parte 1 indica que hay 2 pagina, page1.html y page2.html.
<template id="page2.html">
<ons-page id="page2">
<ons-toolbar
<div class="left">
<ons-toolbar-button id="open_menu">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mi Aplicacion</div>
</ons-toolbar>
<ons-card >
<div class="title">Pagina 2</div>
<div class="content">
<p>Esta es la pagina 2</p>
<div>
</div>
</div>
</ons-card>
</ons-page>
</template>Esta pagina es similar a la primera pagina page1.html solo cambia el contenido de la pagina.
Todas las paginas deben tener el toolbar y el botón de menu.
Parte 4
Esta es la ultima parte, es el código javascript para activar el menú.
ons.ready(function() {
document.querySelector("#myNavigator").resetToPage('splitter.html'); // seleccionamos la paginapor default, seria el template splitter
});
$(document).on("init", function(e) {
$("#open_menu").click(function() { // al hacer click en el icono de menu
$('#menu')[0].open(); // abrimos el menu
})
if (e.target.id == 'menu.html') { // Al seleccionar un elemento del menu
$(".menux_item").click(function() {
var href = $(this).data('href'); // Vamos a usar el data-href que contiene cada elemento
$('#content')[0].load(href).then(menu.close.bind($('#menu')[0])); // cargamos la pagina correspondiente y cerramos el menu
});
}
});Agregue unos comentarios en el código para que se entienda un poco mejor.
Resultado
Este es el resultado de como se muestra el menú.
Descargar
A continuación les proporciono un enlace para descargar el ejemplo.
Link: https://drive.google.com/file/d/1gnwCSt0GSczUfLdddKjIwdRiRIv4KW_R/view
Solo debes descomprimir y abrir el archivo index.html en su navegador.
Conclusión
Onsen UI es una manera fácil y rápida de hacer aplicaciones móviles web, próximamente estaremos subiendo mas artículos y ejemplos de onsen ui.
No se olviden de comentar y suscribirse al blog para recibir un email cada vez que se publiquen nuevos artículos.
También les invito a suscribirse a mi canal de youtube donde publico video demostraciones https://youtube.com/evilnapsis
Saludos a todos!