Cómo construir la navegación fuera del Lienzo con jQuery.mmenu

() translation by (you can also view the original English article)

Este tutorial te llevará a una rápida visita a jQuery.mmenu, un complemento jQuery que ayuda a crear una extensa navegación en el sitio web. A medida que lo examinamos, veremos cómo podemos usar este complemento para crear un menú fuera del lienzo desde cero.

¿Qué es jQuery.mmenu?

Para la mejor descripción de jQuery.mmenu, nos dirigiremos a su página de Github:

"El mejor complemento de jQuery para la aplicación de aspecto similar en y fuera de los menús del lienzo con submenús deslizantes para su sitio web y webapp.

El complemento jQuery.mmenu es altamente personalizable y viene con muchos complementos (por ejemplo, contadores y divisores) más extensiones (por ejemplo, efectos y sombras de página). Para aquellos que prefieren, está disponible como un plugin de Wordpress, y ¡funciona bien en una amplia gama de navegadores!

Introducción a jQuery.mmenu

Para empezar, tendrás que coger una copia de la biblioteca. Esto se puede hacer visitando su página oficial, a través de un gestor de paquetes (por ejemplo Bower), o un CDN (por ejemplo cdnjs ).

Una vez descargado, tendrá que incluir los archivos CSS y JS necesarios en sus páginas.

Tenga en cuenta que, dependiendo del menú que desee crear, pueden ser necesarios diferentes archivos. Por ejemplo, un menú off-canvas requiere los archivos jquery.mmenu.css (o su versión Minificada) y jquery.mmenu.js (o su versión Minificada). Si desea modificar el comportamiento predeterminado del menú (por ejemplo, mover su posición a la derecha), también tendrá que incluir los archivos relacionados con el complemento "off-canvas". Si eso parece confuso y no quieres preocuparte acerca de cuáles son los archivos necesarios, sigue adelante y utiliza los archivos "all" (es decir, jquery.mmenu.all.css y jquery.mmenu.min.all.js) en su Proyectos.

En nuestra demostración, importaremos los archivos "all" a través de un CDN. El elemento head de nuestra página hará referencia al archivo CSS "all":

1	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css'>

De la misma manera, colocaremos el script "all" (y una copia de jQuery) antes de la etiqueta <body> de cierre:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js'></script>

Así que, ¡vamos a empezar a construir el menú!

Configuración del HTML

Comencemos por entender la estructura de nuestra página. Aquí está el código HTML correspondiente:

<div>
    <header><!-- more content here --></header>
    <main><!-- more content here --></main>
</div>
<nav id="menu"><!-- more content here --></nav>

Observe que colocamos todos los elementos, excepto el elemento nav, dentro de una div que lo contiene.

Podemos usar un elemento diferente como contenedor, pero al hacerlo tendríamos que informar al complemento sobre este cambio a través de la propiedad de configuración relevante (es decir, la propiedad offCanvas.pageNodetype). Además, si es posible, deberíamos evitar declarar una serie de propiedades CSS para el elemento envoltorio. Más específicamente, el plugin recomienda lo siguiente:

"Este DIV es mejor sin un (min- / max-) ancho y altura, relleno, borde y margen."

El marcado

El siguiente paso es echar un vistazo más de cerca a la estructura del menú. El código HTML relevante se parece a esto:

1	<nav id="menu">
2	<ul>
3	<li>
4	<a href="#">About</a>
5	<ul>
6	<li>
7	<a href="#">History<span>Click me</span></a>
8	</li>
9	<li>
10	<a href="#">Vision</a>
11	</li>
12	<li>
13	<a href="#">Team</a>
14	</li>
15	</ul>
16	</li>
17	<li>
18	<a href="#">Services</a>
19	</li>
20	<li>
21	<a href="#">Portfolio</a>
22	</li>
23	<li>
24	<a href="#">Clients</a>
25	</li>
26	<!-- more list items here -->
27	</ul>
28	</nav>

Aquí hemos utilizado un código HTML sencillo para construir nuestro menú. Listas no ordenadas, con listas anidadas y enlaces. El complemento no espera un marcado específico; Felizmente, somos capaces de usar cualquier marcado que queramos.

Asignamos un identificador único al menú, que usaremos más adelante para instanciar el complemento. Por último, pero no menos importante, lo escondemos hasta que todos los estilos se hayan aplicado con éxito. Este paso es importante porque, al agregar el siguiente código CSS, se previene un jarring FOUC:

1	nav {
2	display: none;
3	}

Ahora que hemos preparado nuestra página, ¡es hora de inicializar el menú!

Activación del complemento

Antes de mostrar cómo podemos activar el complemento, primero hay que almacenar en caché algunos de nuestros selectores:

1	var $menu = $('#menu');
2	var $btnMenu = $('.btn-menu');
3	var $img = $('img');

Ahora lo inicializamos utilizando el siguiente código:

1	$menu.mmenu({ // configuration settings here });

Podemos personalizar el aspecto predeterminado y la funcionalidad de nuestro menú a través de CSS y los ajustes de configuración disponibles. Veremos algunos ejemplos de esto en un momento.

Además, tenemos la opción de abrir y cerrar el menú de forma automática o manual. En nuestro caso, mostraremos el menú cuando se hace clic en el elemento con la clase btn-menu. Para lograr esta funcionalidad, aprovecharemos la API disponible. Aquí está el código requerido:

var api = $menu.data("mmenu");
    
$btnMenu.click(function() {
    api.open();
});

En contraste, elegiremos ocultar el menú automáticamente. Este es el comportamiento predeterminado; Se activa cuando hacemos clic en cualquier parte de la página, excepto para la parte que pertenece al menú.

Antes de seguir adelante, hay una cosa más que debo mencionar. Si tratamos de abrir un submenú haciendo clic en el elemento de menú de destino (un elemento a), este elemento no será totalmente accesible. Específicamente, el submenú se abrirá sólo cuando hagamos clic en la parte derecha de ese elemento de menú (vea el ejemplo en linea para entender este comportamiento). Para hacer clicable todo el elemento de menú, tenemos que agregar la siguiente línea de código:

1	$menu.find( ".mm-next" ).addClass("mm-fullsubopen");

Cambiar la imagen fuera del lienzo

En esta sección, el objetivo es mostrar un icono de navegación diferente dependiendo del estado de nuestro menú. La siguiente captura de pantalla visualiza lo que queremos lograr:

menu icon states — Los dos estados del icono

Para que eso suceda, trabajaremos con los eventos de apertura (opening) y cierre (closing). Puede encontrar la documentación de esos eventos en la página que está relacionada con el complemento "offCanvas". Este es el fragmento que usamos para cambiar los iconos:

api.bind('opening', function() {
    $img.attr('src', 'arrows_remove.svg');
});
api.bind('closing', function() {
    $img.attr('src', 'arrows_hamburger.svg');
});

Más allá de los eventos anteriores, también hay algunos otros con los que jugar (por ejemplo, los eventos opened y closed) que puede ser útil para sus propios proyectos.

Cambiar ancho predeterminado

Para cambiar el ancho predefinido del menú, podemos usar CSS o Sass (modificando los archivos de origen). De forma predeterminada, sus valores de propiedad de min-width y max-width son iguales a 140px y 440px, respectivamente. En nuestra demostración, veamos cómo podemos cambiar el valor inicial de la propiedad max-width a través de CSS. A continuación se muestran las reglas de CSS que se deben sobreescribir:

.mm-menu {
    max-width: 350px; 
}
    
/**
 * add more vendor prefixes
 * depending on the browsers you're targeting
 */

@media all and (min-width: 550px) {
    html.mm-opening .mm-slideout {
        transform: translate(350px, 0); 
    } 
}
    
/**
 * override this rule
 * in case you're building a right menu
 */

@media all and (min-width: 550px) {
    html.mm-right.mm-opening .mm-slideout {
        transform: translate(-350px, 0);
    }
}

Cambios adicionales al CSS

En este punto, continuaremos personalizando la apariencia del menú. Una vez más, vamos a editar el archivo de origen Sass para modificar los estilos de acuerdo a nuestras necesidades. Echa un vistazo a las reglas que anularemos más abajo (por simplicidad he omitido los valores de las variables Sass):

.mm-menu {
    background: darken($main-color, 10%);
}
  
.mm-listview > li > a {
    color: $text-color;
    padding: 20px;
}

.mm-listview > li > a:hover,
.mm-listview .mm-next.mm-fullsubopen:hover + a {
    color: $highlight-color;
}

.mm-listview > li > a:hover span {
    color: $text-color;
}

.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
    background: transparent url(arrows_check.svg) no-repeat center right 10px;
    background-size: 30px 30px;
    text-decoration: line-through;
}

Echa un vistazo a la última regla. Cada vez que hacemos clic en un elemento de menú, recibe la clase mm-selected, por lo que podemos usar ese selector para estilo. Pero sólo queremos diseñar el último elemento en un proceso de selección, así que apuntaremos a aquellos que no tienen la clase de mm-next.

next link styles — "Acerca de" conduce al submenú a la derecha, pero sólo hemos diseñado el último vínculo que se ha hecho clic

Agregando extensiones y complementos

En una sección anterior, vimos cómo inicializamos el complemento. Ahora, extendamos su comportamiento y funcionalidad reemplazando las opciones de configuración predeterminadas.

Primero cambiamos el título que aparece sobre el panel principal.

A continuación, incluimos los complementos "counters" y "off-canvas". Este último complemento nos permite cambiar la posición del menú en relación con la página.

Finalmente, añadimos tres extensiones. Echa un vistazo al código de inicialización final que aparece a continuación:

$menu.mmenu({
    counters: true,
    navbar: {
        title: "Menu Content"
    },
    extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
    offCanvas: {
        position  : "right",
        zposition : "back"
    }
});

Conclusion

En este tutorial, pasamos por el proceso de crear un menú fuera de la pantalla usando el complemento jQuery.mmenu. Como paso siguiente, eche un vistazo a la fuente completa de nuestra demostración en CodePen. Luego, le sugiero que vaya a la pagina oficial de jQuery.mmenu y mire los varios ejemplos interactivos que están disponibles. ¡Muéstrenos sus ejemplos en los comentarios!