Crear un Splitter menu con Onsen UI

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!