Foto de Ruthie en Unsplash

Anatomía de un sistema de navegación de aplicaciones Cordova (parte III): el menú lateral

Hasta ahora hemos visto cómo gestionar nuestros puntos de vista puesta en el carrusel de Bootstrap: esto nos permite, con la ayuda de algunos plug-in, a deslizar los dedos para cambiar entre vistas. En realidad, hemos utilizado un regulador de la imagen web estándar para construir nuestra estructura de aplicación y obtener el efecto de deslizar.

En la segunda parte del artículo hemos añadido una barra superior de navegación con algunos botones con el fin de proporcionar al usuario una forma alternativa de cambiar entre nuestros puntos de vista, que hemos llamado principales puntos de vista.

Pero, como todos ya sabemos, una aplicación móvil tiene un montón de puntos de vista y en su mayor parte son lo que podríamos llamar vistas secundarias, vistas que residen fuera del flujo de vistas principales y a las que se puede acceder normalmente pulsando botones que activan una acción: botones como "Ver detalles", "Comprar", "Compartir" y así. En esta tercera parte del artículo veremos en detalle cómo implementar y usar estos vistas secundarias: los usaremos para crear un menú lateral que se desliza suavemente desde el lado derecho y unas vistas falsas totalmente estúpidas a las que accederemos tocando un botón de nuestro menú lateral. Pero antes de empezar con el código que tenemos que conseguir un poco de nueva herramienta.

Pre-requisitos

La primera herramienta que necesitamos es la biblioteca animate.css. esta biblioteca, que probablemente mosto de ustedes ya conocen y utilizan en sus proyectos, aloows para implementar easlily animación agradable para cualquier elemento del DOM. Para aquellos que aún no tienen esta biblioteca instalada en sus máquinas, este es el enlace de descarga.

Tal vez tenemos que forjaremos: Para comprobar si podemos sólo tiene que utilizar el plugin jquery.touchSwipe

El menú lateral

El primero vista secundaria que vamos a construir es el menú lateral. aparecerá este menú lateral corredera desde la derecha cuando el usuario pulsa en el último botón en el barra superior de navegación. Sinceramente, el menú lateral es sólo parcialmente una vista secundaria, al menos en el sentido que utilizo este término. Como he dicho anteriormente, en una aplicación tenemos muchos vistas secundarias, pero es probable que solo tengamos un menú lateral. Incluso si tenemos que construir más de un menú lateral, no serán tantas como las otras vistas que una aplicación puede implementar para realizar sus procesos. Por otro lado, un menú lateral no es una vista principal porque reside fuera de la flujo de vistas principales y no se puede acceder a ella como a otra vista en una secuencia ordenada.

dicho esto, comencemos a ver cómo construimos el menú lateral en nuestro index.html archivo. Este es el margen de beneficio:

<div id ="sidemenu">
	<div class ="sidemenu-header">
		<div><a href ="#" id ="sidemenu de cerca"><= Clase I"materiales-iconos">cancelar</yo></un></div>
	</div>
	<= Ul class"opciones">
		<en><a href ="#" class ="view_a">2 Una vista</un></en>
		<en><a href ="#" class ="view_b">2 B view</un></en>
		<en><a href ="#" class ="view_c">2 Ver C</un></en>
		<en><a href ="#" class ="view_d">2 D vista</un></en>
		<en><a href ="#" class ="view_e">2 y vista</un></en>
	</la>
</div>

Bastante sencillo, no es? En primer lugar hemos puesto en marcha una cabecera donde se coloca un botón para cerrar el menú lateral. Luego usamos una lista no ordenada n para construir el propio menú.

reglas CSS para el menú lateral

#sidemenu{
	antecedentes: #fff !importante;
	posición: absoluto;
        monitor: ninguna;
	Derecha: 0;
	parte superior: 0;
	anchura: 80%;
	altura: 100%;
	z-index: 5;
	-webkit-box-shadow: -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	-moz-box-shadow:    -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	sombra de la caja:         -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
}
.sidemenu-header{
	antecedentes: #689F38;
	posición : relativo;
	parte superior      : 0;
	izquierda     : 0;
	anchura    : 100%;
	altura   : 50px;
	/*z-index  : 4;*/
	border-bottom: 6px sólido transparente;
	acolchado superior: 6px;
}
.sidemenu-header-iconos .material{
	tamaño de fuente: 32px;
}
#distrito Sidemenu{
	list-style-type: ninguna;
}
#SIDEMENU ul li{
	color:	#0D6E9C;
}
#sidemenu de cerca{
	margin-left: 10px;
	color: blanco !importante;
}

También hay que añadir una superposición en nuestro margen de beneficio con el fin de vista subyacente ligeramente ennegrecen con el menú en las diapositivas. Añadir esta línea inmediatamente después de la <cuerpo> etiqueta en su index.html:

<div id ="cubrir"></div>

En el index.css, añadimos siguiente regla:

#cubrir{
	posición: absoluto;
	monitor: ninguna;
	anchura: 100%;
	altura: 100%;
	izquierda: 0;
	parte superior: 0;
	antecedentes: RGBA(0,0,0,.3);
	z-index: 5;
}

Ir a vivir con javascript

Ante todo, escribamos los dos controladores de eventos que necesitamos para mostrar y ocultar nuestro menú lateral:

$(documento).en('hacer clic', '# Sidemenu-abierto', función (mi) {
	e.preventDefault();
	enterMenu();
});
$(documento).en('hacer clic', '# Sidemenu de cerca', función (mi) {
	e.preventDefault();
	EXITMENU();
});	

Nada especial aquí: acabamos de evitar que el comportamiento predeterminado del evento y luego llamamos a la función apropiada. Bueno, No perderé su tiempo con discusiones inútiles y le mostraré el código del enterMenu() método:

función enterMenu() {
	$('#Sidemenu').css({'monitor': 'bloquear'}).addClass('SlideInRight animada');
	$('#cubrir').fadeIn();
	setTimeout(función () {
		$('#Sidemenu').removeClass('SlideInRight animada');
	}, 1000);
}

En la primera línea nos propusimos propiedad de presentación para el menú lateral para "bloquear" y luego añadimos 2 clases, "animado" y "slideInRight". La primera clase sólo se activa la animación de nuestra "sidemenu" div, la segunda especifica el tipo de animación. En este caso, queremos la diapositiva menú lateral en el lado derecho.

Sugiero a explorar el archivo animated.css para descubrir todos los tipos de animación soportados.

A continuación, hacemos la superposición visible lo que la vista subyacente ligeramente oscurecido.

Después de esto, usamos setTimeout() función para retrasar un poco el siguiente comando que eliminan las clases "animado" y "slideInRight": de esta manera nuestro div estará limpio y listo para ser animado nuevamente cuando queramos cerrarlo usando el EXITMENU() método:

función EXITMENU() {
	$('#Sidemenu').addClass('SlideOutRight animada');
	$('#cubrir').fadeOut();
	setTimeout(función () {
		$('#Sidemenu').removeClass('SlideOutRight animada').css({'monitor': 'ninguna'});
	}, 1000);
}

Lo ves? los EXITMENU() función revertir el estado div a su estado original: primero agregue la clase "animado" de nuevo y establecer el tipo de animación para "slideOutRight", por lo que el menú lateral se deslizará hacia la derecha, como todos esperarían que hiciera 🙂 Entonces, oculta la superposición. Finalmente,dentro de setTimeout() bloquear, la función de eliminar las clasees para la animación y establezca la propiedad de visualización del menú lateral para "ninguna".

Si ejecuta la aplicación ahora, podrás ver el menú lateral en acción. En la siguiente parte del artículo examinaremos el vistas secundarias ellos mismos y los usaremos para dar vida a los elementos del menú lateral.


Parte 1 - Parte 2 - Parte 3 - Parte 4


5 comentarios en “Anatomía de un sistema de navegación de aplicaciones Cordova (parte III): el menú lateral”

  1. Hola,

    Parte terminada II. Todo trabajando. Es la primera vez que uso Bootstrap y touchSwipe, y estoy muy impresionado por la fluidez de la interfaz de usuario.

    Tengo que aclarar algo: Había agregado un comentario a la Parte II, y se perdió en la traducción (Creo que escribir etiquetas Html individuales en el comentario hizo que la página web formatee los comentarios de manera extraña). La última línea de mi comentario fue para explicar que el selector para el menú de navegación necesitaba tener “un” adjunto a él como el “índice de datos” el atributo está en el ancla dentro del elemento de lista y no en el elemento de lista en sí.

    Ahora me moví a la Parte III, pero golpeé un bloque. Creo que tal vez falte un paso, ya que no puedo ver cómo el menú lateral está conectado al guión, ya que parece que falta una "identificación".…

    El código para el cuarto “menú” botón lee:

    menú

    Como es el codigo (abajo) se supone que activa el menú lateral?

    $(documento).en('hacer clic', "# Sidemenu-open", función (mi) {
    e.preventDefault();
    enterMenu();
    });

    No hay id =”sidemenu-abierto” definido en cualquier lugar. ¿Falta algún paso en el tutorial que me muestre dónde agregar esto?? No quiero empezar a codificar una solución, ya que estropearía el resto del tutorial en el futuro..

    ¿Podría informarme si falta un paso o si he leído completamente mal esta sección y estoy siendo un poco estúpido??

    Muchas gracias,

    Paul

    1. Bueno, Paul, Pido disculpas por mi error. En la parte 2 se describe la barra de navegación superior y el último elemento del menú es el que debe abrir el menú: este artículo debe tener la identificación “sidemenu-abierto”. Soy el estúpido 🙂 He corregido el fragmento de código en la parte 2. Lo siento de nuevo…

  2. Lo hizo de nuevo. No le gusta el código html en los comentarios.. Donde se muestra “menú” como enlace en mi comentario anterior, de hecho había pegado en el cuarto UL LI en la línea del menú de navegación, el de la “menú” icono de materiales.

  3. Excelente! Me alegro de que fuera la solución, ya que también había agregado id =”sidemenu-abierto” en el ancla para poder continuar con la siguiente parte.
    Paul.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.